如何为网站创建粘性标题栏
P粉505450505
P粉505450505 2024-03-25 16:50:46
0
2
683

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

P粉505450505
P粉505450505

全部回复(2)
P粉604507867

如果你想让它在向下滚动到某个点时保持粘性,那么你可以使用这个函数:

$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 粘性标题

P粉265724930

在 CSS 中添加

position: fixed;

到你的标题元素。真的就是这么简单。 下次,尝试右键单击您在网站上看到的内容并选择“检查元素”。我认为现在每个现代浏览器都有它。非常有用的功能。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板