Question

我试图让我的导航栏粘在页面顶部而不使用固定的位置，只在一定量的空间后粘贴，比如500px。我尝试了很多不同的解决方案，但没有一个能够工作，因为我有一个非常奇怪的导航。它也有一些原因在jsfiddle，但不在我的网站上。

CSS

#background {
  background: lightblue;
  background-position:center top;
}

p {
  font-size:15px; 
  padding-top:100px;
  padding-left:100px;
  padding-right:100px;
}

.rotate {
  float: left;
 -webkit-transform: rotate(180deg) 2s;
  transform: rotate(180deg) 2s;
  transition: all 2s ease;
  transition-delay: 0.4s;
}

.rotate:hover {
          -webkit-transform: rotateZ(-360deg);
          -ms-transform: rotateZ(-360deg);
          transform: rotateZ(-360deg);
}

.container {
    overflow: hidden;
    font-family: 'Roboto Condensed', sans-serif;
    position: static;
  z-index: 150;
  margin-bottom: -80px;
}

.container a {
    float: right;
    font-size: 20px;
    color: black;
    text-align: center;
    padding: 40px 70px;
    text-decoration: none;
        transition: background 1s;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: white;
    color: black;
    padding: 40px 70px;
    background-color: inherit;
    font-family: 'Roboto Condensed', sans-serif;
        transition: background 1s;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: lightgreen;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-right: 1px solid #bbb;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 18px;
}

.dropdown-content a:hover {
    background-color: #ddd;
    border-right: 1px solid #bbb;
}

.dropdown:hover .dropdown-content {
    display: block;
}

HTML

        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo:200|Open+Sans:300|Quicksand|Roboto+Condensed|Shadows+Into+Light" rel="stylesheet">



    <div class="active">
    <div id="background">
  <div class="opacity">
  <div class="container">
  <div class="rotate">
  <img class="chiz" src="kkk.png" alt="Example">
</div>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  <a href="FAQ.html">FAQ</a>
  <a href="games.html">Games</a>
    <div class="dropdown">
      <button class="dropbtn" onclick="window.location.href='store.html'">Store</button>
      <div class="dropdown-content">
        <a href="wall.html">Example</a>
        <a href="store.html">Example</a>
      </div>
  </div>

</div>
</div> <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  </p>

jQuery

jQuery(function($) {
  function fixDiv() {
    var $cache = $('.container');
    if ($(window).scrollTop() > 0)
      $cache.css({
        'position': 'fixed',
        'top': '0px'
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto'
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});

谢谢，任何帮助表示赞赏：D

Answer 1

我将假设<div class="dropdown">是您的导航栏。

如果不使用固定位置，您可以使用JS this回答来获取窗口的顶部。

然后运行以下函数，该函数侦听窗口滚动事件，然后在滚动一定数量的像素后设置导航栏的顶部以匹配窗口的顶部。

document.onscroll = () => {
  const navbar = document.getElementsByClassName('dropdown')[0];
  let top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

  if(top > 500) {
    navbar.style.top = top;
  } else {
    navbar.style.top = 0;
  }
};

我现在无法测试。所以它可能会也可能不会奏效。我测试后会更新它。

如何制作一个div，在一点空格后向下滚动到页面顶部

1 个答案: