在浏览器的滚动与CSS

不知道如何让这样的事情在这里看到http://studiompls.com/case-studies/crown-maple/在浏览器的滚动与CSS

头去小和标志更改为不同的按钮改变大小和标题的内容。无需编写任何JS，可以用CSS完成吗？

干杯！

更新：

如果JS是必须的，你可以推荐学习什么联系呢？谢谢。

2013-07-20 Designer

不可能没有JS –

@Designer您就可以开始学习从codeacademy.com JavaScript和一些理论可以从这里http://www.javascriptkit.com/javatutors/index覆盖。 shtml – sachinjain024

易于使用jQuery：

$(window).scroll(function(){ 
if($(window).scrollTop() >= $('.header').outerHeight()) { 
// put content here for if the page has scrolled 200 pixels 
} 
});

确保你有一个js文件虽然

来源

2013-07-20 06:55:03

最好使用'$（'＃header'）。outterHeight（）'而不是'200 ' –

你可以用jQuery来做到这一点。这很容易。

这里有一个演示：http://jsfiddle.net/jezzipin/JJ8Jc/

$(function(){ 
    $('#header_nav').data('size','big'); 
}); 

$(window).scroll(function(){ 
    if($(document).scrollTop() > 0) 
{ 
    if($('#header_nav').data('size') == 'big') 
    { 
     $('#header_nav').data('size','small'); 
     $('#header_nav').stop().animate({ 
      height:'40px' 
     },600); 
    } 
} 
else 
    { 
    if($('#header_nav').data('size') == 'small') 
     { 
     $('#header_nav').data('size','big'); 
     $('#header_nav').stop().animate({ 
      height:'100px' 
     },600); 
     } 
    } 
});

来源

2013-07-20 06:54:50 Miro

既然你需要的款式导航的内部元件它将更好地添加类导航风格的内部项目

<div class="outer"> 
<div id="menu">addd</div>

和js

$(window).scroll(function() { 
    var sc = $(window).scrollTop(); 
    if (sc > 50) { 
     $("#menu").addClass("big"); 
    } else { 
     $("#menu").removeClass("big"); 
    } 
});

终于CSS

#menu { 
    position:fixed; 
    height:50px; 
    background:#ccc; 
    left:0; 
    top:0; 
    float:left; 
    width:100%; 
} 
.outer { 
    height:800px; 
} 

#menu.big { 
    height:20px; 
}

这里是link

来源

2013-07-20 07:03:32 Hushme

我做了一个fiddle只使用CSS，没有JavaScript，以便实现大致相同的效果：标题变小当您向下滚动到第一部分时，其图标会发生变化。当然，当您向后滚动时，标题再次增长并恢复其旧图标。没有什么比几个:hover s（以及一个转换，但这只是结冰;它适用于非转换感知的浏览器）更深奥。

这可能并不完全符合您的要求，但在用户关闭Javascript的情况下，您可以将其用作后备。

来源

2013-07-20 09:29:28

不错的尝试。我不会在生产中使用它。它假定您正在使用鼠标滚轮并且光标位于内容上。它比假设用户拥有仅仅使用CSS的目的的javascript更糟糕。 – Miro

Here是对影响整个教程，我不认为这是可能做到这一点，而不JS因为你需要在滚动检查，并与jQueryUI的，例如什么:)

希望做toggleClass它帮助;）

干杯

来源

2013-10-30 19:17:35 boska0712

在浏览器的滚动与CSS

回答

相关问题