I created a fixed navbar that stays in top when I scroll down after 300 px. however.
What I want to achieve is that when the browser window gets very small the navbar just appears on top from the beginning of the page.
(function($) {
var $navbar = $('.navbar');
var setCss = function() {
if($(window).width() < 600) {
$navbar.css('position', static);
}
};
$(document).ready(function() {
setCss();
$(window).position(setCss);
});
})(jQuery);
#nav_bar {
position: fixed;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav_bar" class="navbar navbar-inverse " data-spy="affix" data-offset-top="300">
<div class="container navbar-inner">
<!-- logo -->
<div class="navbar-header">
</div>
<!-- Menue Item -->
<div>
<ul class="nav navbar-nav">
<li>About us</li>
<li>Contact</li>
{{#if user}}
<li role="presentation">Logout</li>
{{else}}
<li role="presentation">Login</li>
<li role="presentation">Register</li>
{{/if}}
</ul>
</div>
</div>
</nav>
This is what happen when the window gets very small
Related
Hey everyone I have been struggling with the nav menu and getting it to toggle on and off, it seems to be turning on and off in the dev tools but the li links don't disappear, I have tried rewriting the code, but still can't get it to work, I double checked to make sure i was selecting the right elements, please if anyone can help I would sincerely appreciate it!
Thank You
here is the code:
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle && nav) {
toggle.addEventListener("click", () => {
nav.classList.toggle("show");
})
}
};
showMenu('nav-toggle', 'nav-menu');
<link rel="stylesheet" href="practice.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<header class="1-header" id="header">
<nav class="nav bd-grid">
<div class='nav_toggle' id='nav-toggle'>
<i class="bx bxs-grid"></i>
</div>
<!-- Roby -->
Sneaker Warehouse
<div class='nav_menu' id='nav-menu'>
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">Featured</li>
<li class="nav_item">Women</li>
<li class="nav_item">New</li>
<li class="nav_item">Shop</li>
</ul>
</div>
<div class="nav_shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="practice.js"></script>
<script src="https://unpkg.com/boxicons#2.1.1/dist/boxicons.js"></script>
I got it working by reading one of the comments on this post. you forgot to add the css.
html
<link rel="stylesheet" href="practice.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<header class="1-header" id="header">
<nav class="nav bd-grid">
<div class='nav_toggle' id='nav-toggle'>
<i class="bx bxs-grid"></i>
</div>
<!-- Roby -->
Sneaker Warehouse
<button class='nav_menu' id='nav-menu'>
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">Featured</li>
<li class="nav_item">Women</li>
<li class="nav_item">New</li>
<li class="nav_item">Shop</li>
</ul>
</button>
<div class="nav_shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="practice.js"></script>
<script src="https://unpkg.com/boxicons#2.1.1/dist/boxicons.js"></script>
js
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle && nav) {
toggle.addEventListener("click", () => {
nav.classList.toggle("show");
toggle.classList.toggle("show");
})
}
};
showMenu('nav-toggle', 'nav-menu');
css
.nav_menu {
display: none;
}
.show {
display: initial;
}
Hello for my website I want the second white menu bar to move to the top middle and stay at top when I start to scroll down. I followed a tutorial on how to do this but for some reason, it moves to the far left and does not expand all the way across. (Made the navbar turn red for testing purposes.)
Im very new to javascript so please take it easy on me. :)
This is the website Im working on.
http://lonestarwebandgraphics.com/
const nav = document.querySelector('.header-menu_wrap');
const topOfNav = nav.offsetTop;
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll', fixNav);
// 135 140
.fixed-nav .header-menu_wrap .header-container_wrap {
position: fixed;
box-shadow: 0 5px rgba(0, 0, 0, 0.1);
background: red;
}
<!-- Bottom White header START-->
<nav class="header-menu_wrap">
<div class="header-container_wrap container">
<div class="header-container__flex">
<div class="header_caption">
<!-- MENU -->
<nav id="site-navigation" class="main-navigation stuckMenu" role="navigation">
<!-- HAMBURGER BARS -->
<!-- <button class="menu-toggle" aria-controls="main-menu" aria-expanded="false">
<i class="menu-toggle" aria-controls="main-menu8" aria-expanded="false">
<i class="fas fa-bars"></i>
</i>
</button> -->
<!-- HAMBURGER BARS END -->
<!-- MENU START -->
<ul class="menu" id="main-menu">
<li>ABOUT</li>
<li>SERVICES</li>
<li>PHOTO GALLERY</li>
<li>VIDEO EXAMPLE</li>
<li>CONTACTS</li>
</ul>
<!-- MENU START END -->
<!-- SEARCH ICON -->
<div class="header__search">
<i class="fas fa-search"></i>
</div>
</nav>
</div>
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
In the page that you provide there are a couple of issues: first if you decouple a part of the page, usually it is a good idea to left something behind to hold height. Secondly there is an issue with z-indexes. Finally it is a good idea to read the coordinates of elements when you receive the onready/onload event, and not before, because page layout can change or can be innaccesible, I talk about:
const nav = document.querySelector('.header-menu_wrap');
const topOfNav = nav.offsetTop;
As I commented in the main post, if I add your provided code in a snipplet it works for me:
const nav = document.querySelector('.header-menu_wrap');
const topOfNav = nav.offsetTop;
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll', fixNav);
// 135 140
.fixed-nav .header-menu_wrap .header-container_wrap {
position: fixed;
box-shadow: 0 5px rgba(0, 0, 0, 0.1);
background: red;
}
<!-- Bottom White header START-->
<nav class="header-menu_wrap">
<div class="header-container_wrap container">
<div class="header-container__flex">
<div class="header_caption">
<!-- MENU -->
<nav id="site-navigation" class="main-navigation stuckMenu" role="navigation">
<!-- HAMBURGER BARS -->
<!-- <button class="menu-toggle" aria-controls="main-menu" aria-expanded="false">
<i class="menu-toggle" aria-controls="main-menu8" aria-expanded="false">
<i class="fas fa-bars"></i>
</i>
</button> -->
<!-- HAMBURGER BARS END -->
<!-- MENU START -->
<ul class="menu" id="main-menu">
<li>ABOUT</li>
<li>SERVICES</li>
<li>PHOTO GALLERY</li>
<li>VIDEO EXAMPLE</li>
<li>CONTACTS</li>
</ul>
<!-- MENU START END -->
<!-- SEARCH ICON -->
<div class="header__search">
<i class="fas fa-search"></i>
</div>
</nav>
</div>
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
I want to check the scroll position is greater than 350 and menuSticky offset position is 92 in same condition.that condition is not working.I gave my piece of code
$(window).scroll(function(){
if($(document).scrollTop() > 350) {
$('.secMenu').addClass('menuSticky');
} else {
$('.secMenu').removeClass('menuSticky');
}
var menu = $('.menuSticky'); //shows error
// var menu = $('.secMenu'); working
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
if((($('.menuSticky').offset.top)==92)) {
console.log('true');
$('.dropdown').hover(function() {
$('.secMenu').hide();
$(this).toggleClass("open");
}).mouseleave(function(){
$('.secMenu').show();
});
}
});
.menuSticky{
/*top:14%; */
top:92px;
z-index:999;
position: fixed;
width: 100%;
left:1.1%;
}
#consultant,#segment,#partner,#insights{
min-height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1" >Consulting & Solutions</li>
<li class="test2" >Segments</li>
<li class="test3" >Our Partners</li>
<li class="test4" >Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="" id="consultant">consultant
</div>
<div class="" id="segment">segment
</div>
<div class="" id="partner">partner
</div>
<div class="" id="insights">insights
</div>
updated
$(window).scroll(function(){
if($(document).scrollTop() > 350) {
$('.secMenu').addClass('menuSticky');
} else {
$('.secMenu').removeClass('menuSticky');
}
var menu = $('.menuSticky');
console.log(menu.length);
if (menu.length==1) {
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
$('.dropdown').hover(function() {
$('.menuSticky').hide();
$(this).toggleClass("open");
}).mouseleave(function(){
$('.menuSticky').show();
});
}
});
.menuSticky{
/*top:14%; */
top:92px;
z-index:999;
position: fixed;
width: 100%;
left:1.1%;
}
#consultant,#segment,#partner,#insights{
min-height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1" >Consulting & Solutions</li>
<li class="test2" >Segments</li>
<li class="test3" >Our Partners</li>
<li class="test4" >Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="" id="consultant">consultant
</div>
<div class="" id="segment">segment
</div>
<div class="" id="partner">partner
</div>
<div class="" id="insights">insights
</div>
In your block of code have a condition to remove class menuSticky when scroll position less than 350px. So it will be a case you try to get offset top from an undefined variable menu.
To fix your issue, check menuSticky is existing before doing further.
var menu = $('.menuSticky');
if (menu.length) {
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
if ((($('.menuSticky').offset.top) == 92)) {
console.log('true');
$('.dropdown').hover(function () {
$('.secMenu').hide();
$(this).toggleClass("open");
}).mouseleave(function () {
$('.secMenu').show();
});
}
}
I need help for my personal website. I want to make a one page site with a fixed top navbar (with transparent background). At the scrolling of the page, the color of the menu elements must change dinamically from black to white on the sections that have a dark background (they have a ".dark-bg" class) and return white on the other sections. All sections are 100vh height (except for the menu, of course). This is the HTML main structure of the site:
<section class="section--menu fixed-header">
<nav class="menu" id="navigation">
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
</nav>
</section>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I wrote this jQuery script but it seems to work only for the last section with ".dark-bg" class.
$(document).ready(function() {
$(".dark-bg").each(function() {
detectBg( $(this) );
});
function detectBg(sezione) {
$(window).scroll(function() {
var finestra = $(window).scrollTop();
var sezCurr = sezione.offset().top;
var sezNext = sezione.next().offset().top;
if (finestra >= sezCurr && finestra < sezNext) {
$('.menu__link').css("color", "#ebebeb");
}
else {
$('.menu__link').css("color", "#1c1c1c");
}
});
}
});
Thanks in advance!
You need to handle scroll event of the window, and in that handler, check if any of the dark section is under the menu, if so, then change the color of the menu links. Here is an example of changing the color for all links, but it can be easily extended to do it separately for each link:
$(window).scroll(function() {
var vpHeight = $(window).height();
var isBlack = false;
$(".dark-bg").each(function(i, section) {
if(isBlack) {
return;
}
var offset = $(section).offset().top - $(window).scrollTop();
if(((offset + vpHeight) >= 0) && ((offset + vpHeight) <= vpHeight)) {
isBlack = true;
return;
}
});
$(".menu__link").css("color", isBlack ? "white" : "black");
});
body {
padding: 0;
margin: 0;
}
ul {
position:fixed;
background: orange;
padding: 0;
margin: 0;
list-style-type: none;
}
ul > li {
float: left;
padding: 0 4px;
}
section {
background:red;
height: 100vh;
}
.dark-bg {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I am trying to fade in the navigation bar and stick to top while scrolling to bottom of the page. Its fade effect works only the first time. My code is below.
<style type="text/css">
.navOpacity{
opacity: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var ht = $('header').height()+70;
if($(this).scrollTop() >= ht){
$("#navb").addClass("navbar-fixed-top navOpacity")
.fadeTo('slow','1');
$(".row:first").css("padding-top","50px");
}else{
$("#navb").removeClass("navbar-fixed-top navOpacity");
$(".row:first").css("padding-top","0px");
}
});
});
</script>
<div class="container">
<header class="page-header">
<h1>Hello world</h1>
</header>
<nav id="navb" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown" href="#">Page 1
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-4">
<h3>h1. Bootstrap heading</h3>
Hello world and Mario.
</div>
<div class="col-md-4">
<h3>h2. Bootstrap heading</h3>
Hello world and Mario.
</div>
<div class="col-md-4">
<h3>h3. Bootstrap heading</h3>
Hello world and Mario.
<img src="rsz_myimg.jpg" class="img-responsive" />
</div>
</div><!-- end or row class-->
</div><!-- end container class-->
Your problem is that after the first time fadeTo is executed, your element is left with a style="opacity: 1" attribute, which is left there. So you have to remove it when you scroll to the top.
I've also changed the way the navbar is hidden, I suggest using .hide(), cause it also uses the elements' style attribute, that way it will not be overridden. And there's also a navbarVisible var that is used to determine if the navbar is already faded in and if it is, the code for fading it in is not executed when not needed. This should be a tiny step up in performance.
This seems to work just fine:
<script type="text/javascript">
$(document).ready(function(){
var navbarVisible = false;
$(window).scroll(function(){
var ht = $('header').height()+70;
if ($(this).scrollTop() >= ht) {
if (!navbarVisible) {
$("#navb").addClass("navbar-fixed-top")
.hide()
.fadeTo('slow','1');
$(".row:first").css("padding-top","50px");
navbarVisible = true;
};
} else {
$("#navb").removeClass("navbar-fixed-top").removeAttr('style');
$(".row:first").css("padding-top","0px");
navbarVisible = false;
}
});
});
</script>
You don't need this part anymore:
<style type="text/css">
.navOpacity{
opacity: 0;
}
</style>
Here's a link to an example JSFiddle with working code: JSFiddle Link
My two cents...
Just add this Javascript and away you go. Currently configured to graduate over the first 200px of scroll.
var scrollFadePixels = 200;
var fadeNavbar = function (window)
{
var opacity = window.scrollTop() / scrollFadePixels;
$('.navbar-fixed-top').css('background-color', 'rgba(34,34,34,' + opacity + ')');
}
fadeNavbar($(window));
$(window).scroll(function () {
fadeNavbar($(this));
});