當頁面有足夠的內容需要向下滾動時，頁眉和菜單將消失。現在，標題不是的一個問題，但我真的很喜歡菜單保持固定在頁面的頂部，同時仍然滾動內容。如何在滾動時將頁面的一部分固定在頂部

在這裏我發佈一個網頁的代碼與標題和菜單

<html> 
<head> 
<noscript><meta http-equiv="REFRESH" content="0;URL=error-no-javascript.html"></noscript> 
<link rel="shortcut icon" href="http://www.vtsim.com/favicon.png" /> 
<title>TRAINZ - VTsim.com</title> 
</head> 
<body ondragstart="return false" onselectstart="return false" oncontextmenu="return false" link="red" alink="red" vlink="red"> 
<font face="Arial" size="2" color="black"> 

<p align="center"> 
<img src="http://www.vtsim.com/image/head_trz_1.png"><a href="http://fs.vtsim.com" border="0"><img src="http://www.vtsim.com/image/head_trz_2.png"></a> 
</p> 

//--- now starts the menu wich I pretend to be kept fixed on top when scrolling 

<p align="center"> 
<a href="http://trainz.vtsim.com" border="0"><img src="http://www.vtsim.com/image/b_home_a.png"></a><a href="http://trainz.vtsim.com/trains.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_trains_i.png"></a><a href="http://trainz.vtsim.com/tracks.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_tracks_i.png"></a><a href="http://trainz.vtsim.com/trackside.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_trkside_i.png"></a><a href="http://trainz.vtsim.com/scenery.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_scenery_i.png"></a><a href="http://trainz.vtsim.com/routes.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_routes_i.png"></a><a href="http://trainz.vtsim.com/others.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_others_i.png"></a><a href="mailto:[email protected]" border="0"><img src="http://www.vtsim.com/image/b_email.png"></a><br /> 
<img src="http://www.vtsim.com/image/sep_800.png"> 
</p> 

//--- and the menu code ended here 

<p align="center"> 
Contents will display here 
</p> 

</font> 
</body> 
</html>

來源

2015-10-05 Vasco Troni

可能複製：http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll – Jay

基本上包裹的容器內，帶着幾分的jQuery你這樣的標題：

$(window).scroll(function() { 
      if ($(window).scrollTop() > 226) { 
       $(".header").addClass("fixed"); 
      } else { 
       $(".header").removeClass("fixed"); 
      } 
     });

你添加一個類到這個容器，並讓它滾動226px（內容超過你的頁眉高度）。

CSS：

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

FIDDLE

編輯：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(window).scroll(function() { 
      if ($(window).scrollTop() > 226) { 
       $(".header").addClass("fixed"); 
      } else { 
       $(".header").removeClass("fixed"); 
      } 
     }); 
    </script> 
    <style type="text/css"> 
     .fixed { 
     position:fixed; 
     width:100%; 
     top:0; 
     left:0;   
    } 
    </style>

：方便地在網上實現這只是在你的HTML添加此這一切之前的</head>踏歌並且不要忘記添加<div class="header">也像小提琴的例子。

來源

2015-10-05 14:48:40

這是awseome！當我找出應該在哪裏（或哪些文件）實現CSS和jQuery代碼時，我的問題將得到完全解答。我原本做了一個簡短的演示文稿，但它被編輯和重切割，我解釋說我是一個簡單的HTML和複製/粘貼一切完全noob。預先感謝您，但我需要進一步的實施幫助。 –

我編輯了我的答案，讓你知道在哪裏添加代碼 –

Perfect.Implemented和工作！非常感謝！ –

我這樣做的方式，我認爲這是一個非常標準的方法，一旦窗口的滾動位置到達標題頂部，就在標題上設置一個css類.fixed。

此方法需要JavaScript（更具體地說，jQuery）！

$(function() { 
 
    createSticky(jQuery("#header")); 
 
}); 
 

 
function createSticky(sticky) { 
 

 
    if (typeof sticky !== "undefined") { 
 

 
    var pos = sticky.offset().top, 
 
     win = jQuery(window); 
 

 
    win.on("scroll", function() { 
 
     win.scrollTop() >= pos ? sticky.addClass("fixed") : sticky.removeClass("fixed"); 
 
    }); 
 
    } 
 
}

#header { 
 
    background: #666; 
 
    padding: 3px; 
 
    padding: 10px 20px; 
 
    color: #fff; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
body { 
 
    height: 5000px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>stuff that might be above the header</p> 
 

 
<div id="header"> 
 
    Home 
 
</div>

只有

當瀏覽器支持長一點，你可以使用position: sticky這將基本上沒有JavaScript的做同樣的事情

#feat=css-sticky

來源

2015-10-05 15:22:25

可以使用DOM，位置CSS屬性和很少的JavaScript代碼，我的scrolltop財產實現它。即把onscroll事件body標籤（O添加事件偵聽器）

<body onscroll="calculate_top()">

和id="myMenu"在你的菜單

//--- now starts the menu wich I pretend to be kept fixed on top when scrolling 
<p align="center" id="myMenu"> 
    . . . 
    <img src="http://www.vtsim.com/image/sep_800.png"> 
</p> 
//--- and the menu code ended here

和Javascript

function calculate_top() { 
    var y = 0;  
    element=document.getElementsByTagName("body"); 

    y=element[0].scrollTop; 
    //you can see y values while you scrolling 
    console.log(" y = " + y); 
    if(y > 140){//old style 
     document.getElementById("myMenu").style.position='fixed'; 
     document.getElementById("myMenu").style.top=0+'px'; 
    }else{ 
     document.getElementById("myMenu").style.position='relative'; 
    } 
}

140值之間的測量頂部你的菜單和屏幕上的身體頂部（你可以改變到你需要的任何東西）

來源

2015-10-05 17:50:36

如何在滾動時將頁面的一部分固定在頂部

回答

CSS。如果您的用戶人口統計數據是Firefox，那麼隨着Firefox已經支持一段時間，您可以繼續使用它。 http://caniuse.com/#feat=css-sticky

相關問題

CSS。如果您的用戶人口統計數據是Firefox，那麼隨着Firefox已經支持一段時間，您可以繼續使用它。

http://caniuse.com/#feat=css-sticky