如何製作一個div後向下滾動一下空間貼到頁面頂部

Question

我試圖讓我的導航欄堅持頁面頂部而不使用固定位置，並且只在設定的數量後粘住的空間，比如500px。我已經嘗試了許多不同的解決方案，但都沒有工作，因爲我有一個非常奇怪的導航。它也出於某種原因在jsfiddle，但不是在我的網站。

繼承人jsfiddle of it.

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

我現在不能測試這個。所以它可能會或可能不會工作。在我測試之後會更新這個。