如何为网站创建粘贴标题栏

Question

我想为网站创建一个粘性标题栏,就像本网站上的粘性标题(http://www.fizzysoftware.com/)一样,如果有的话可以帮我解决编码或任何帮助我创建相同.你的回复对我很有帮助.

Answer 1

在你的CSS中,添加

position: fixed;

到你的标题元素.真的很简单.下次,尝试右键单击您在网站上看到的内容,然后选择"Inspect element".我认为现在每个现代浏览器都有它.非常有用的功能.

Answer 2

如果要在向下滚动到某个点时使其变粘,则可以使用此功能:

$window = $(window);
$window.scroll(function() {
  $scroll_position = $window.scrollTop();
    if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
        $('.your-header').addClass('sticky');

        // to get rid of jerk
        header_height = $('.your-header').innerHeight();
        $('body').css('padding-top' , header_height);
    } else {
        $('body').css('padding-top' , '0');
        $('.your-header').removeClass('sticky');
    }
 });

粘性类:

.sticky {
  position: fixed;
  z-index: 9999;
  width: 100%;
}

您可以使用此插件,它有一些有用的选项

jQuery Sticky Header

Answer 3

CSS 已经给你答案了。试试这个

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

现在将 Sticky 类添加到任何菜单侧边栏或任何您想要粘贴到顶部的内容，它将自动计算边距并粘贴到顶部。干杯。