如何在圖像之後將導航欄粘貼到頁面的頂部？

我試圖讓頁面頂部滾動頁面頂部的導航欄。如何在圖像之後將導航欄粘貼到頁面的頂部？

所以這將是類似的東西，codepen.io，但有一張照片。因此，在圖片上，它會延伸到屏幕的大部分區域，但也會根據窗口的大小進行調整。因此，我不能在200像素後面說出，因爲圖像的大小會有所不同。如果可能的話，有沒有一種方法可以創建一個Javascript函數，一旦註冊到任何元素的底部，navbar將會粘住？

HTML：

<header> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt=""> 
    </header> 

    <nav id = "nav_bar"> 
     <ul class = "navbar-list"> 
      <li> 
       <a href="">link1</a> 
      </li> 
      <li class="dropdown"> 
       <a href="#" class="dropbtn">link2</a> 
        <div class="dropdown-content"> 
         <a href="#">link 1</a> 
         <a href="#">link 2</a> 
         <a href="#">link 3</a> 
         <a href="">link 4</a> 
        </div> 
      </li> 
      <li> 
       <a href="">link 3</a> 
      </li> 
      <li> 
       <a href="">link4</a> 
      </li> 
     </ul> 
    </nav> 

<body> 

<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p> 

<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p> 

<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p> 

<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p> 

<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p>

CSS：

body{ 
margin:0px; 
} 

header{ 
margin: 0 auto; 
/*position: fixed;*/ 
top: 0; 
} 


img{ 
max-width: 100%; 
text-align: center; 
top: 0; 
display: block; 
} 

.navbar-fixed { 
top: 0; 
z-index: 100; 
position: fixed; 
width: 100%; 
} 


ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
} 

li { 
float: left; 
} 

li a, .dropbtn { 
display: inline-block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
background-color: red; 
} 

li.dropdown { 
display: inline-block; 
} 

.dropdown-content { 
display: none; 
position: absolute; 
background-color: green; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

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

.dropdown-content a:hover {background-color: #f1f1f1} 

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

codepen.io - 包括樣品圖像

來源

2016-11-24 CatTreats

哪些錯誤與codepen？這似乎是做你的事後，我錯過了什麼？ – Keith

在我的代碼筆中，在帖子底部的那個，導航欄不會在圖像滾動過去後粘到頁面的頂部。 – CatTreats

這樣的事情

var nav_bar_top_offset = $('#nav_bar').offset().top; 
 

 
$(window).scroll(function() { 
 
    if ($(this).scrollTop() > nav_bar_top_offset) { 
 
     $('#nav_bar').addClass('fixed'); 
 
    } else { 
 
    $('#nav_bar').removeClass('fixed'); 
 
    } 
 
});

body { 
 
    margin: 0px; 
 
} 
 
header { 
 
    margin: 0 auto; 
 
    /*position: fixed;*/ 
 
    top: 0; 
 
} 
 
section{background:#fff} 
 
img { 
 
    max-width: 100%; 
 
    text-align: center; 
 
    top: 0; 
 
    display: block; 
 
} 
 
.navbar-fixed { 
 
    top: 0; 
 
    z-index: 100; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 
li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: green; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.fixed{ 
 
    position:fixed; 
 
    top:0; 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt=""> 
 
    </header> 
 

 
<nav id="nav_bar"> 
 
    <ul class="navbar-list"> 
 
    <li> 
 
     <a href="">link1</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropbtn">link2</a> 
 
     <div class="dropdown-content"> 
 
     <a href="#">link 1</a> 
 
     <a href="#">link 2</a> 
 
     <a href="#">link 3</a> 
 
     <a href="">link 4</a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="">link 3</a> 
 
    </li> 
 
    <li> 
 
     <a href="">link4</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</section>

來源

2016-11-24 08:36:44

首先，感謝您花時間做到這一點。但是我想知道如果沒有在背景中製作圖像，是否有辦法做到這一點？就像導航欄上方的圖像一樣，導航欄將「粘貼」到頂部。 – CatTreats

@CatTreats我已經更新了我的答案，看看 –

這顯然是我的答案的副本。 – Ionut

我想你正在努力實現的就是這個。希望會幫助你。點擊Run code snippet即可看到它在運作。你檢查

首先，當你達到你想在滾動時保持固定的元素，並添加fixed類，然後如果你回滾你刪除它。

var navBarOffset = $('#nav_bar').offset().top; 
 

 
$(window).scroll(function() { 
 
    var navBar= $('#nav_bar'); 
 
    var scroll = $(window).scrollTop(); 
 

 
    if (scroll >= navBarOffset) { 
 
    navBar.addClass('fixed'); 
 
    } else { 
 
    navBar.removeClass('fixed'); 
 
    } 
 
});

body { 
 
    margin: 0px; 
 
} 
 
header { 
 
    margin: 0 auto; 
 
    /*position: fixed;*/ 
 
    top: 0; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top:0; 
 
    left:0; 
 
    width: 100%; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    text-align: center; 
 
    top: 0; 
 
    display: block; 
 
} 
 
.navbar-fixed { 
 
    top: 0; 
 
    z-index: 100; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 
li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: green; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt=""> 
 
</header> 
 

 
<nav id="nav_bar"> 
 
    <ul class="navbar-list"> 
 
    <li> 
 
     <a href="">link1</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropbtn">link2</a> 
 
     <div class="dropdown-content"> 
 
     <a href="#">link 1</a> 
 
     <a href="#">link 2</a> 
 
     <a href="#">link 3</a> 
 
     <a href="">link 4</a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="">link 3</a> 
 
    </li> 
 
    <li> 
 
     <a href="">link4</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<body> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 

 
</body> 
 
<footer> 
 

 
</footer>

來源

2016-11-24 08:37:05 Ionut

就像你使用的教程Codepen，只是改變的例子的選擇你的選擇。

試試這個：

var mn = $("#nav_bar"); 
    mns = "navbar-fixed"; 
    hdr = $('header').height(); 

$(window).scroll(function() { 
    if($(this).scrollTop() > hdr) { 
    mn.addClass(mns); 
    } else { 
    mn.removeClass(mns); 
    } 
});

這裏的codepen

記住：如果您設置導航欄，以粘，在那裏有將要刪除的導航欄的空間。因此，您的導航欄可能會出現在您的第一行文字上。只需在您的標題中添加導航欄高度的填充即可。這也可以在你的js中完成。

要麼你加個班這個填充或者你手動添加。下面是例子：

$('header').addClass("extraPadding"); // extraPadding is the class that you have to create

或

$('header').css("padding-bottom", "40"); // 40 could be the height of your navbar

來源

2016-11-24 08:37:09

var nav = $('.adjustlink'); 
    var pos = nav.offset().top; 

    $(window).scroll(function(){ 
     var fix = ($(this).scrollTop() > pos) ? true : false; 
     nav.toggleClass("fix-nav", fix); 
    });

希望這個幫你fiddle

來源

2016-11-24 09:03:30

對你有幫助嗎？ –

如何在圖像之後將導航欄粘貼到頁面的頂部？

回答

相關問題