8

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

4

4 回答 4

15

在您的 CSS 中，添加

position: fixed;

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

于 2012-11-03T19:32:16.693 回答
8

如果你想让它在向下滚动到某个点时变得粘稠，那么你可以使用这个功能：

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

于 2016-01-10T20:26:31.553 回答
0

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

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

现在将粘性类添加到任何菜单侧边栏或任何你想粘在顶部的东西，它会自动计算边距并粘在顶部。干杯。

于 2020-09-03T22:41:08.750 回答
0

如果您希望在 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>

请记住在这种情况下添加类，我创建了一个区域（将我的 HTML 分隔在我希望应用我的 CSS 的特定区域）蓝色（只是导航的一种颜色）和粘性，它将携带我们的粘性功能。您可以处理要添加的其他属性，这取决于您。在 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%;
}

位置固定意味着它将始终处于同一位置；并且使用 top 0 我将始终位于顶部和 100% 的宽度，因此它覆盖了整个屏幕。现在让我们的导航栏变成蓝色

.blue {
    background: #7abcff;

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

于 2020-11-17T15:07:53.380 回答