Heim > Fragen und Antworten > Hauptteil
Ich möchte eine Sticky-Titelleiste für meine Website erstellen, genau wie den Sticky-Header auf dieser Website (http://www.fizzysoftware.com/), falls es jemanden gibt, der mir bei der Codierung helfen kann, oder eine Ressource, die mir weiterhelfen kann Ich erstelle das Gleiche. Ihre Antwort wird mir sehr helfen.
P粉6045078672024-03-26 14:34:26
如果你想让它在向下滚动到某个点时保持粘性,那么你可以使用这个函数:
$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%; }
您可以使用这个插件,它有一些有用的选项
P粉2657249302024-03-26 10:55:25
在 CSS 中添加
position: fixed;
到你的标题元素。真的就是这么简单。 下次,尝试右键单击您在网站上看到的内容并选择“检查元素”。我认为现在每个现代浏览器都有它。非常有用的功能。