Reputation: 39

Navbar to scroll then remain fixed under a fixed header. ISSUES

Can any one help me resolve some issues with my code? I am new at this and having some problems.

Some issues with my initial code. Not doing what I need it to. Any help is appreciated!

I need this to: Pink menu bar to stop scrolling and become fixed at the bottom of the fixed header. The call to action should scroll up under the fixed header. Currently it is not scrolls all the way to the top under the fixed header and then bounces to the proper position. It also covers should not hides the top part o f he the main content that remains on the page after becoming fixed. There should be some initial padding like when you land on the page before scrolling.

* {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>

Please see code I am having issues with here: http://codepen.io/BasicBlue/pen/KaxYNG

Upvotes: 0

Answers (3)

Thibault Bach

Reputation: 556

You need to add an padding top after you apply your fixed position. I propose to you to changed your nevHeight calculation with that :

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

The advantage of my solution is if your window is resize, the padding is adapted to the new viewport size.

I hope my answer suits you.

EDIT : I added a new stuff to fix the scroll triggering position and optimized the process. I added too the resize event callback.

Upvotes: 1

studio-klik

Reputation: 196

you have to add the two heights together 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');
             }
        });
    });

Demo: http://codesheet.org/cs/iKWtywj0

Upvotes: 0

Mubeen Khan

Reputation: 1

Try this Code:

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

Upvotes: 0

Navbar to scroll then remain fixed under a fixed header. ISSUES

Answers (3)

Related Questions