6

任何想法如何制作这样的东西在这里看到http://studiompls.com/case-studies/crown-maple/

标题变小，徽标更改为不同的按钮。不用写任何 JS 就可以用 CSS 完成吗？

干杯!

更新：

如果JS是必须的，您可以推荐任何学习链接吗？谢谢。

4

5 回答 5

8

易于使用的jquery：

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

确保你有一个 js 文件

于 2013-07-20T06:55:03.323 回答
5

你可以用jquery来做。这很容易。

这是一个演示：http: //jsfiddle.net/jezzpin/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-20T06:54:50.570 回答
2

我做了一个只使用 CSS 而不是 Javascript 的小提琴来达到大致相同的效果：当你向下滚动到第一部分时，标题会变小，并且它的图标会发生变化。当然，当您向上滚动时，标题会再次增长并恢复其旧图标。只用几个:hovers 就完成了（和一个转换，但这只是结冰；它适用于非转换感知浏览器）。

这可能不是您所追求的，但您可以将其用作后备，以防用户关闭 Javascript。

于 2013-07-20T09:29:28.473 回答
2

这是关于该效果的完整教程，我认为没有 js 就不可能做到这一点，因为您需要检查滚动，并使用 jQueryUI 进行 toggleClass 之类的:)

希望能帮助到你 ;）

干杯

于 2013-10-30T19:17:35.703 回答
0

由于您需要为导航的内部元素设置样式，因此最好在导航上添加类以设置内部项目的样式

<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;
}

这是链接

于 2013-07-20T07:03:32.427 回答