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;
}

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

Answer 4

如果要简化HTML和CSS选项来创建Stiky NavBar，可以使用以下命令：只需创建一个像这样的导航栏即可：

<nav class="zone blue sticky">
      <ul class="main-nav">
          <li><a href="">About</a></li>
          <li><a href="">Products</a></li>
          <li><a href="">Our Team</a></li>
          <li class="push"><a href="">Contact</a></li>
  </ul>
  </nav>

在这种情况下，请记住添加类，我创建了一个区域（将我想要应用CSS的特定区域中的HTML分开）蓝色（仅是导航的一种颜色）和粘稠的，这将承载我们的粘性功能。您可以根据自己的需要来处理其他属性。在CSS上添加以下内容以创建粘滞；首先，我将从区域标签开始

.zone {
    /*padding:30px 50px;*/
    cursor:pointer;
    color:#FFF;
    font-size:2em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.3s linear;
}

现在带有粘性标签

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

固定位置，意味着它将始终位于同一位置；顶部为0时，我将始终位于顶部，宽度为100％，因此它覆盖了整个屏幕。现在是使导航栏为蓝色的颜色

.blue {
    background: #7abcff;

您可以使用此示例创建您自己的粘性导航栏，并使用CSS属性对其进行自定义。

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

4 个答案: