Question

任何人都可以帮我解决代码中的一些问题吗？我是新手，遇到了一些问题。

我的初始代码存在一些问题。不做我需要它。任何帮助表示赞赏！

我需要这样：粉红色的菜单栏停止滚动并固定在固定标题的底部。号召性用语应在固定标题下向上滚动。目前它不会一直滚动到固定标题下的顶部，然后弹回到正确的位置。它还涵盖了不应该隐藏在修复后页面上保留的主要内容的顶部。应该有一些初始填充，就像在滚动之前登陆页面一样。

* {margin: 0; padding: 0;}

a {text-decoration: none;}

/* This class is added on scroll */
.fixed {
	position: fixed; 
	top: 182px; 
	height: 70px; 
	z-index: 1;
}

body {
	color: #fff;
	font-family: Gill Sans, Verdana; 
	font-size: 18px;
	text-align: center;
}

header {
background: blue;
position: fixed;
color: black;
height: 182px;
position: fixed;
top: 0;
width: 100%	;
z-index: 1;
}

#action-call {
	color: black;
	height: 200px;
	padding-top: 200px;
	position: relative;
	width: 100%;
}

/* Navigation Settings */
nav {
	position: relative;
	width: 100%;
	height: 70px;
	background: pink;
}

nav li {
	display: inline-block;
	padding: 24px 10px;
}

nav li a {
	color: #757575;
	text-transform: uppercase;
}

#main-content {
	color: black;
	height: auto;
	padding-top: 18px;
	position: relative;
	width: 100%;
}

footer {
	color: black;
	height: 100px;
	padding-top: 18px;
	position: relative;
	width: 100%;	
}

<html lang="en-US">
<head>

	<!-- Meta tags & title /-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="robots" content="all,index,follow" />

	<title>Scroll To Top Then Fixed Navigation Effect With JQuery and CSS</title>
	<meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" />
	
	<link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- Main stylesheet /-->

</head>

<body>
	<header>
	<h1>FIXED HEADER</h1>
		A fixed header with my logo & stuff
	</header>

<section id="action-call">
	<h1>CALL TO ACTION</h1>
	<p>This is a  call to action and it will have some text, a big button and a huge image here!</p>	
</section>	
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
   $(document).ready(function(){
	   $(window).bind('scroll', function() {
	   var navHeight = $( window ).height() - 70;
			 if ($(window).scrollTop() > navHeight) {
				 $('nav').addClass('fixed');
			 }
			 else {
				 $('nav').removeClass('fixed');
			 }
		});
	});
</script>

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Team</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

<section id="main-content">
	<h1>MAIN CONTENT</h1>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>
	<p>This is the main content section and there will be tons of text here and various posts and images etc.</p>	
</section>

<footer>
	<h1>FOOTER</h1>
	<p>This is the footer area and not much will be in here. Just somne copyright and credit stuff</p>
	<p>This is the footer area and not much will be in here. Just somne copyright and credit stuff</p>
	<p>This is the footer area and not much will be in here. Just somne copyright and credit stuff</p>
</footer>

</body>
</html>

请参阅我在这里遇到问题的代码： http://codepen.io/BasicBlue/pen/KaxYNG

Answer 1

您需要在应用固定位置后添加填充顶部。我建议你改变你的nevHeight计算：

var padding_apply = false;
var nav_init_pos = 0;

function set_nav_pos() {
   nav_init_pos = $('#action-call').innerHeight() - $( 'header' ).innerHeight();
}

$(document).ready(function(){
   set_nav_pos(); // initialize scroll triggering position
   $(window).on('resize', function() {
     set_nav_pos(); // re-initialize the position if your header block height change with the resize action
     $(window).trigger('scroll'); // We force update the body padding with the scroll event callback.

   });
   $(window).on('scroll', function() {
         if ($(window).scrollTop() > nav_init_pos) {
            if(!padding_apply) {
                $('nav').addClass('fixed');
                $('body').css('padding-top', $('nav').innerHeight());
                padding_apply = true;
            }
         }
         else {
            if(padding_apply) {
                $('nav').removeClass('fixed');
                $('body').css('padding-top', 0);
                padding_apply = false;
            }
         }
    });
});

我的解决方案的优点是，如果您的窗口调整大小，填充将适应新的视口大小。

我希望我的回答适合你。

编辑：我添加了一些新东西来修复滚动触发位置并优化了该过程。我也添加了resize事件回调。

Answer 2

试用此代码：

$(document).ready(function() {
    $(window).scroll(function() {
        var a = $(this).scrollTop();
        if (a >= 400) {
            // Window Scroll 400px from top
            // Something
        } else {
            // Something
        }
    });
});

Answer 3

你必须将两个高度加在一起200px + 182px

   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - 482;
             if ($(window).scrollTop() > navHeight) {
                 $('nav').addClass('fixed');
             }else{
                 $('nav').removeClass('fixed');
             }
        });
    });

演示：http://codesheet.org/cs/iKWtywj0

导航的导航栏然后保持固定在固定标题下。问题

3 个答案: