Question

我已经设法为我正在设计的网站制作了一个下拉菜单，而且我有点卡在了粘性标题部分..

我的标题具有粘滞效果但是当我向下滚动标题时不会粘在页面顶部。如我在CSS中提到的那样，它始终保持从顶部80px的边距。

当我滚动时，如何使标题粘到TOP，当我滚动回到页面顶部时，它应保持其原始位置。希望我已经说清楚了。

只是粘贴我的CSS，因为HTML在小提琴中过于冗长。

#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    z-index:9998;
    position:relative;
}

检查this fiddle我创建的DEMO。

编辑：要清楚。我想要顶部：80px最初在那里。我只希望标题在滚动时粘在顶部。 EXAMPLE

Answer 1

你走了。

<强> WORKING DEMO

CSS的变化：

#nav {
position:fixed;
top:-40px;
}

Answer 2

你需要摆脱一些相互冲突的风格：

http://jsfiddle.net/5GqYh/4/

首先，您有top内嵌标题，因此我将其设置为0。

我还调整了菜单上的上边距，这也是推低了它。

Answer 3

试试这些：

从你的css中删除它以使标题贴在顶部。

#nav { .. margin:40px auto; .. }

2.css样式标题 - 位置：相对将代替位置：固定。

3.将内容div放在另一个div中，并为该div创建一个滚动条。这样，您的标题将始终贴在顶部。

Answer 4

在CSS上创建一个.sticky类，使元素的位置固定，然后您可以轻松检测用户是否滚动到足以使其粘到顶部，此时您将.sticky类添加到元素中。当然，当用户一直向后滚动时，您应该删除该类。例如：

function stick() { 
   var stickyNavTop = $('.nav').offset().top;
   var scrollTop = $(window).scrollTop();
   if(stickyNavTop > scrollTop) {
      $('.nav').addClass('sticky'); 
   } else {
      $('.nav').removeClass('sticky');
   }
}

$(window).scroll(function() {
   stick();
});

制作一个粘性标题贴在顶部

4 个答案: