0

我设法为我正在设计的网站制作了一个下拉列表，但我有点卡在粘性标题部分..

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

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

只是粘贴我的 CSS 因为 HTML 太长了。

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

检查这个小提琴以获得我创建的演示。

编辑：只是为了清楚。我希望 top:80px 最初在那里。我只希望标题在滚动时粘在顶部。例子

4

4 回答 4

3

干得好。

工作演示

CSS 的变化：

#nav {
position:fixed;
top:-40px;
}
于 2013-10-11T11:28:53.923 回答
0

试试这些：

  1. 从您的 css 中删除它以使标题粘在顶部。

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

2.css 样式的 header - position:relative 将代替 position:fixed。

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

于 2013-10-11T11:35:31.130 回答
0

在您的 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();
});
于 2013-10-11T11:56:41.487 回答
0

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

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

首先，你已经top内联了你的标题，所以我将它设置为 0。

我还调整了菜单上的上边距，这也将其向下推。

于 2013-10-11T11:27:58.903 回答