So erstellen Sie eine Sticky-Titelleiste für Ihre Website
P粉505450505
P粉505450505 2024-03-25 16:50:46
0
2
717

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粉505450505
P粉505450505

Antworte allen(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;

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage