All geek questions in one place

Sticky Nav Content Engagement

So, the problem is now adapted to the content section without confirming the navigation bar when it is “fixed”. You can see this when you scroll slowly (skips 2-3 lines of text). Any suggestions?

Here is my code:

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');  
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);
.banner,.sociallinks,.nav,.nav ul
{
	max-width: 100%;
	max-width: 100%;
}

.nav
{
	font-family: 'Oswald', sans-serif; font-weight: 300;
}

html
{
	background: #333;
	background-attachment: fixed;
	background-size: 50px;
}

body
{
	margin: 0px auto;
	text-align: center;
}

.banner
{
	width: 700px;
	margin: 10px auto 0px auto;
	padding: 0px;
}

.sociallinks
{
	width: 960px;
	margin: 0px auto;
}

.sociallinks ul
{
	list-style-type: none;
	margin: 0px auto;
	padding: 0px
}

.sociallinks ul li
{
	display: inline-block;
	padding: 0px 10px;
}

.sociallinks ul li img 
{
	-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
	width: 30px;
	height: 30px;
}

.nav
{
	width: 100%;
	margin: 0px auto;
	background: #333;
	padding: 1px 0px;
}

.nav ul
{
	width: 100%;
	list-style-type: none;
	margin: 10px auto;
	padding: 0px;
}

.nav ul li
{
	color: white;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.nav ul li a
{
	width: 60px;
	border-top-color: silver;
	border-top-style: solid;
	border-top-width: 1px;
	color: white;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.nav ul li a:hover:not(.active)
{
	display: inline-block;
	text-decoration: none;
	color: #111;
	border-top-color: #111;
}

.nav ul li a.active
{
	border-top-color: #111;
	color: rgba(0,0,0,0.8);
	text-shadow: 0.5px 0.5px 0.1px rgba(0,0,0,0.3);
}

.fixed
{
	background-color: #333;
	position: fixed;
	top: 0px;
	padding: 0px;
	margin: 0px 0px;
	width: 100%;
	z-index:0;
}

.content
{
	position: relative;
	background-color: rgba(0,0,0,0.1);
	color: white;
	width: 960px;
	height: 1500px;
	max-width: 95%;
	max-width: 95%;
	margin: 0px auto;
	padding: 0px;
	border: 0px;
	z-index: -1;
	overflow: hidden;
}

table
{
	width: 100%;
}
<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<link rel="stylesheet" type="text/css" href="main.css">
    		<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    		<title>Broadbent</title>
    	</head>
    	<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
    	<body>
    		<div class="banner">
    			<img src="https://i.gyazo.com/655ab7687250c664674d857632b478fa.png" alt="BROADBENT" width="100%">
    		</div>
    		<div class="sociallinks">
    			<ul>
    				<li><a href="https://twitter.com/Broadbent45" target="_blank"><img src="https://i.gyazo.com/bef1f025ca882ab5d542b9c72b91a76b.png" alt="Twitter"></a></li>
    				<li><a href="https://www.youtube.com/user/OAB450" target="_blank"><img src="https://i.gyazo.com/55b8298090b8cb625f3973117af5ee30.png" alt="YouTube"></a></li>
    				<li><a href="https://plus.google.com/+OAB450" target="_blank"><img src="https://i.gyazo.com/396ee154e38f7fe6b2c5328bb806483e.png" alt="Google+"></a></li>
    			</ul>
    		</div>
    		<div class="nav">
    			<ul>
    				<li><a class="active" href="#">HOME</a></li><li><a href="#">MAPS</a></li><li><a href="#">ESSENTIALS</a></li><li><a href="#">FAQ</a></li>
    			</ul>
    		</div>
    		<div class="content">
    			Main Section 1<br>Main Section 2<br>Main Section 3<br>Main Section 4<br>Main Section 5<br>Main Section 6
    		</div>
    		<script type="text/javascript" src="js/main.js"></script>
    	</body>
    </html>
Run codeHide result
+4
source share
3 answers

Here is one solution, just using plain vanilla javascript(and not jQuery):

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');  
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);

Here is a complete working example:

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');	
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);
#banner,#sociallinks,.nav,.nav ul
{
	max-width: 100%;
	max-width: 100%;
}

.nav
{
	font-family: 'Oswald', sans-serif; font-weight: 300;
}

html
{
	background: #333;
	background-attachment: fixed;
	background-size: 50px;
}

body
{
	margin: 0px auto;
	text-align: center;
}

.banner
{
	width: 700px;
	margin: 10px auto 0px auto;
	padding: 0px;
}

.sociallinks
{
	width: 960px;
	margin: 0px auto;
}

.sociallinks ul
{
	list-style-type: none;
	margin: 0px auto;
	padding: 0px
}

.sociallinks ul li
{
	display: inline-block;
	padding: 0px 10px;
}

.sociallinks ul li img 
{
	-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
	width: 30px;
	height: 30px;
}

.nav
{
	z-index: 99;
	width: 960px;
	margin: 0px auto;
	background-color: #333;
}

.nav ul
{
	width: 100%;
	list-style-type: none;
	margin: 10px auto;
	padding: 0px;
}

.nav ul li
{
	color: white;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.nav ul li a
{
	width: 160px;
	border-top-color: silver;
	border-top-style: solid;
	border-top-width: 1px;
	color: white;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.nav ul li a:hover:not(.active)
{
	display: inline-block;
	text-decoration: none;
	color: #111;
	border-top-color: #111;
}

.nav ul li a.active
{
	border-top-color: #111;
	color: rgba(0,0,0,0.8);
	text-shadow: 0.5px 0.5px 0.1px rgba(0,0,0,0.3);
}

.fixed
{
	position: fixed;
	top: 0;
	left: 50%;
	margin-left:-480px;
}


.content
{
	background-color: rgba(0,0,0,0.1);
	width: 960px;
	height: 1500px;
	max-width: 90%;
	max-width: 90%;
	margin: 0px auto;
	padding: 0px;
	border: 0px;
}

table
{
	width: 100%;
	color: white;
}
		<div id="status"></div>
		<div class="banner">
			<img src="https://i.gyazo.com/655ab7687250c664674d857632b478fa.png" alt="BROADBENT" width="100%">
		</div>
		<div class="sociallinks">
			<ul>
				<li><a href="https://twitter.com/Broadbent45" target="_blank"><img src="https://i.gyazo.com/bef1f025ca882ab5d542b9c72b91a76b.png" alt="Twitter"></a></li>
				<li><a href="https://www.youtube.com/user/OAB450" target="_blank"><img src="https://i.gyazo.com/55b8298090b8cb625f3973117af5ee30.png" alt="YouTube"></a></li>
				<li><a href="https://plus.google.com/+OAB450" target="_blank"><img src="https://i.gyazo.com/396ee154e38f7fe6b2c5328bb806483e.png" alt="Google+"></a></li>
			</ul>
		</div>
		<div class="nav">
			<ul>
				<li><a class="active" href="#">HOME</a></li><li><a href="#">MAPS</a></li><li><a href="#">ESSENTIALS</a></li><li><a href="#">FAQ</a></li>
			</ul>
		</div>
		<div class="content">
		</div>
Run codeHide result
+2
source

You have an error in your code:

jQuery("nav").addClass("fixed");

Must be

jQuery(".nav").addClass("fixed");

Note the missing period in the selector.

Edit:

You should also fix other links to nav.

, div , , , # :

jQuery("#status").html(scrollPos);

, , HTML :

<div class="class-name"></div>

jQuery

jQuery(".class-name");

id

<div id="element-id"></div>

jQuery

jQuery("#element-id");

,

0

script, , . script , .

: var navOffset = jQuery("nav").offset().top; "" , "nav".

: var navOffset = $(".nav").offset().top;

: jQuery(".status").html(scrollPos); "", .

("#status").html(scrollPos);

if/else, .nav "nav".

. : https://jsbin.com/lumabe/edit?html,css,js,output

The devil is in the details when it comes to manipulating the DOM with javascript!

Here is the complete, corrected script:

jQuery(document).ready(function() {
var navOffset = jQuery(".nav").offset().top;

jQuery(window).scroll(function() {

    var scrollPos = jQuery(window).scrollTop();
    jQuery("#status").html(scrollPos);

    if (scrollPos >= navOffset) {
        jQuery(".nav").addClass("fixed");
    } else {
        jQuery(".nav").removeClass("fixed");
    }
});

});

0
source

Source: https://habr.com/ru/post/1624315/

More articles:


All Articles