使粘性标题粘在顶部

Making a sticky header stick to the top

本文关键字：顶部 标题      更新时间：2023-09-26

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

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

当我滚动时，

我怎样才能使标题粘在顶部，当我滚动回页面顶部时，它应该保持其原始位置。希望我已经把自己说清楚了。

只是粘贴我的 CSS，因为 HTML 在小提琴中太长了。

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

检查这个小提琴，了解我创建的演示。

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

你去吧。

工作演示

CSS 中的更改： 

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

你需要摆脱一些冲突的样式：

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

首先，您必须top内联标题，所以我将其设置为 0。

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

试试这些：

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

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

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

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

在 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();
});
相关文章：