文章/答案/技术大牛

发布

社区首页 >问答首页 >仅当导航栏位于页面顶部时才使导航栏透明，然后在滚动时设置为纯背景

问仅当导航栏位于页面顶部时才使导航栏透明，然后在滚动时设置为纯背景
EN

Stack Overflow用户

提问于 2015-10-31 23:18:53

回答 4查看 1.4K关注 0票数 0

我知道有一些与制作透明导航栏相关的主题，但答案并不像我预期的那样。

我想做一个导航栏，它的功能类似于这个网站：http://themenectar.com/demo/salient-frostwave/

我的意思是，当它在页面顶部时，栏将是透明的。一旦你向下滚动，它仍然停留在顶部，但它现在有一个可见的背景。

那么，如何处理HTML、CSS和JavaScript/jQuery的问题呢？

提前谢谢你。

css

javascript

jquery

html

回答 4

Stack Overflow用户

发布于 2015-10-31 23:26:03

我认为使用opacity CSS属性应该可以做到这一点。

票数 0

Stack Overflow用户

发布于 2015-10-31 23:29:34

你可以使用一个叫做headroom.js的插件，它非常容易使用和实现。

当导航栏或标题不再“粘”在页面顶部时，你需要做的就是改变它的背景颜色。

这个插件也是轻量级的，有普通的js，jquery，甚至可以很容易地和angular一起使用。

票数 0

Stack Overflow用户

发布于 2015-10-31 23:29:34

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('element here').css(css goes here );
   }
});
if($('html').offset().top) {
  //If on top
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33453180

复制

相似问题

问仅当导航栏位于页面顶部时才使导航栏透明，然后在滚动时设置为纯背景
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅当导航栏位于页面顶部时才使导航栏透明，然后在滚动时设置为纯背景EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅当导航栏位于页面顶部时才使导航栏透明，然后在滚动时设置为纯背景
EN