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

DEMO http://codepen.io/alexincarnati/pen/JngrK

Answer 2

$(document).on("scroll",function(){
    if($(document).scrollTop()>50){
        $("nav").addClass("nav_small");
    } else{
        $("nav").removeClass("nav_small");
    }
});

nav.nav_small{width: 80%}
nav{width:100%}

这很容易;）

粘性导航缩小

2 个答案: