javascript - 缩小的粘性导航

Question

$(document).scroll(function(){
    if($(this).scroll)
    {   
        $('nav').css({"width":"80%"});
    }
});

Codepen

js/jquery 的新手.. 一些 CSS 经验。我想使用尽可能少的 css 和 jquery 来获得这种效果:website滚动时缩小导航。

该网站有一个演示和一些代码，但我觉得这可以用更少的 CSS 和 Jquery 来实现。对于初学者，我可以让导航在滚动时减少到 80% 的宽度，但在向上滚动时它不会居中或回到 100%。

最终，我想在 SharePoint 2013 全局导航中使用此效果。正如那个演示代码一样，我无法让它与 SharePoint 一起工作，所以我尝试从简单的 html 开始，然后从那里开始。

谁有这方面的经验？

Answer 1

你可以做这样的事情，即使你认为通常看到标题高度变化的网站是很常见的。然后按照你的例子，你可以对宽度做同样的事情:

$(window).scroll(function(){
  if($(document).scrollTop() > 0)

    {   
        $('nav').css({"width":"80%"});
    }
  else{
         $('nav').css({"width":"100%"});

  }
});

通常不建议使用 jQuery 编辑 css 属性。最好用 jQuery 添加一个带有 CSS 属性的类。

 $(window).scroll(function(){
      if($(document).scrollTop() > 0)

        {   
             $('nav').addClass('width80');
        }
      else{
             $('nav').removeClass('width80');

      }
    });

记得定义 nav.width80 类:

nav{
        width:100%;
} 
nav.width80{
        width:80%;
} 

演示 http://codepen.io/alexincarnati/pen/JngrK