Question

当向下滚动时，如何让导航栏位于下方并靠近标题栏？目前导航栏覆盖标题。这是我到目前为止所取得的成绩，请查看this JSFiddle并帮助我解决问题。

以下是我在标题栏上的css：

position: fixed;
width:100%;
height: 50px;
background-color: chartreuse;
text-align: center;

Answer 1

我认为这就是你想要的：https://jsfiddle.net/cCrul/ks1chdab/4/

我刚刚使用#navbar.fixed更改了50px中的#navbar.fixed { ... top: 50px; ... }：

var stickyNavTop = $('#navbar').offset().top;

$(window).scroll(function() {  
    if ($(window).scrollTop() > stickyNavTop) {
        $('#navbar').addClass('fixed');
    }
    else {
        $('#navbar').removeClass('fixed');
    }  
});

＆＃13;

*{
	margin: 0;
	padding: 0;
}

body{
	min-height: 100%;
	background-color: #aaaabb;
}

#header {
  position: fixed;
  width:100%;
    height: 50px;
    background-color: chartreuse;
    text-align: center;
}

#navbar{
	-webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

#navbar.fixed{
    background-color: #FFFFFF;
    left: 0;
    position: fixed;
    top: 50px;
    width: 100%;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    color: #000;
}

#navbar ul,
#footer ul {
	list-style: none;
	text-align: center;
	padding-bottom: 15px;
}

#navbar ul li,
#footer ul li{
	display: inline-block;
}

#navbar li a.nav-active{
	color: #1F2ED1;
}

#navbar ul li a,
#footer ul li a{
	text-decoration: none;
	padding: 8px;
	text-transform: uppercase;
	color: #cecece;
	display: block;
}

.body-wrapper{
	width: 960px;
	margin: 0 auto;
}

.section{
	margin-bottom: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"><h2>HEADER IMAGE</h2></div>
<img src="http://lorempixel.com/960/450" />
<div id="navbar">
		<ul>
			<li><a href="#home-section" class="nav-active">Home</a></li>
			<li><a href="#about-section">About</a></li>
			<li><a href="#products-section">Products</a></li>
			<li><a href="#contact-section">Contact</a></li>
		</ul>
	</div>
	<div class="body-wrapper">
		<div id="home-section" class="section">
			<h3>Home heading</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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>
		</div>
		<div id="about-section" class="section">
			<h3>About heading</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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>
		</div>
		<div id="products-section" class="section">
			<h3>Products heading</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
		</div>
		<div id="contact-section" class="section">
			<h3>Contact heading</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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 adipisicing 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>
		</div>
	</div>
	<div id="footer">
		<ul>
			<li>&#169; Test</li>
			<li><a href="">Terms</a></li>
			<li><a href="">Privacy</a></li>
		</ul>
	</div>

＆＃13;

Description = Properties.Settings.Default.(name + "Description");

＆＃13;

Answer 2

您只能使用CSS postion: sticky（而不是js）。 e.g：

.element {
   position: sticky;
   top: 10px;
}

JSFiddle

MDN - postion - CSS

Can I use - browsers support for postion: sticky

向下滚动时，如何使标题和导航栏都固定在顶部

2 个答案: