Develop Reference

Sticky Menu with Hide the sticky menu on scroll down

I am trying to add a sticky menu on my webpage. The sticky menu has to go away if I scroll down and It has to appear when I scroll up. I have gone over the internet and found some answers. But it is not working as expected. I tried 2 cases.
Case 1:
I tried below CSS and JS:
CSS:
#media (min-width: 769px) {
.main-navigation {
position: sticky;
top: 0px;
z-index: 99;
}
}
JS:
jQuery(document).ready(function( $ ){
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll >= previousScroll){
$('#primary-menu').addClass('menu-toggle');
} else {
$('#primary-menu').removeClass('menu-toggle');
}
previousScroll = currentScroll;
});
});
When I try the above code, it is working well but sometimes the sticky menu is flickering like a flashlight.
Then I tried the next case.
Case 2:
CSS:
#media (min-width: 769px) {
.main-navigation {
position: fixed;
top: 0px;
width:100%;
z-index: 99;
}
}
JS:
jQuery(document).ready(function( $ ){
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll >= previousScroll){
$('#primary-menu').addClass('menu-toggle');
} else {
$('#primary-menu').removeClass('menu-toggle');
}
previousScroll = currentScroll;
});
});
In this case, it is not flickering. But it is overlapping with the header. Please look at the image here.
Actually, the menu has to come after the header. Can anyone help me to solve this?

How to control when a jQuery slideToggle(); which is position:absolute; is higher than viewport?

I have a slideToggle(); menu which is positioned absolutely on the bottom of the page. The slideToggle(); is going to show big content and sometimes this ends up being taller than the viewport.
My question is, how do I prevent the menu to:
1 - Not going on the top of the logo as they are both on the sidebar of my website
2 - When it reaches a height taller than the viewport, this will be scrollable
To explain myself better, I'd like the content of my menu, once is shown by slideToggle(); and whenever is taller than the viewport's height minus logo's height, to stop right below my logo and to continue expanding downwards if that's the case, and that I am able to scroll it down despite its position:absolute.
Does anyone have an idea on how I can achieve that? Please have a look at the snippet.
$( "#click" ).click(function() {
$( ".content" ).slideToggle();
});
.logo {
background: #11a1d6;
margin: 10px;
height: 100px;
width: 300px;
}
.list {
width: 200px;
position: absolute;
bottom: 20px;
}
.content {
background: #082965;
height: 10000px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"></div>
<ul class="list">
<li id="click">
Click me
<div class="content"></div>
</li>
</ul>

You would need an additional wrapper for your .content that has overflow-y: hidden and height set to the max height available. To determine this height you need a function that runs after your DOM is loaded and adds this to your .content-wrapper:
function setContentMaxHeight() {
let containerHeight = $('.container').height()
let logoMargin = $('.logo').offset().top;
let logoHeight = $('.logo').height();
let listHeight = $('.list').height();
let listMargin = 20;
let maxHeight = containerHeight - ( 2 * logoMargin ) - logoHeight - ( 2 * listMargin) - listHeight;
$('.content-wrapper').css({
'height': maxHeight + 'px'
});
}
$(document).ready(function(){
setContentMaxHeight();
window.onresize = setContentMaxHeight; // detect the window resize and rerun the function
});
working fiddle

Sticky navigation bar won't float to center after I tried to fix it

I made a sticky navigation bar but every time I pull it down it won't stay floated to center and it looks really bad.
HTML:
<nav>
Home
About
Other
Contact
</nav>
CSS:
.fixed {
position: fixed;
top: 0;
}
JAVASCRIPT/JQUERY:
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
Query("nav").removeClass("fixed");
}
});
});
Same code in PasteBin
I would like your feedback soon please thank you!

Navigation bar is not responsive after scrolling

I am new to web development.I met a problem when designing a scrolling navigation bar.
I used a bootstrap grid and jquery for this. If I don't scroll down and just resize the window, then everything is fine. The navigation bar is resized and in the center of the window. But after I scroll down, the size of navigation bar will be fixed. Its size won't change when I make window larger(it will be smaller if I make window smaller, but not centered). This may caused by setting width: nav.width() in js file, but I don't know how to fix it.
This is a new account so I don't have enough reputation to upload images. I will try to describe it using words. For example, at beginning, the parent of navigation bar is 1140px, the width of navigation bar is 100%, so its size is 1140px. If I resize the window, let us say the width of its parent is 720px, then the navigation bar width is also 720px. Then if I scroll down, the callback function in js will run, it will set the width to 720px, which is a fixed value, thus it won't be responsible any more. Now, if I resize window to make its parent back to 1140px, the width of navigation bar is 720px rather than 1140. So how to fix this?
<div class="container">
<div class="row">
<div class="col-md-12">
<header id="home" style="height:300px">
<nav id="nav-wrap">
<ul id="nav" class="nav">
<li class="current">
Home
</li>
<li class="smotthscroll">
About
</li>
<li class="smotthscroll">
Portfolio
</li>
<li class="smotthscroll">
Skills
</li>
<li class="smotthscroll">
Contact
</li>
</ul>
</nav>
</header>
</div>
</div>
</div>
CSS
#nav-wrap {
font: 22px 'opensans-bold', sans-serif;
width: 100%;
margin: 0 auto;
left: 0;
top: 0;
}
ul#nav {
text-align: center;
padding: 0;
width: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
}
ul#nav li {
height: 48px;
display: inline-block;
}
ul#nav li a {
color:white;
padding: 8px 13px;
display: inline-block;
text-align: center;
}
$(function() {
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var navWrap = $('#nav-wrap');
var $w = $(window);
$w.scroll(function () {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if(shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
width: nav.width()
});
isFixed = true;
}else if (!shouldBeFixed && isFixed) {
nav.css({
position: 'static'
});
isFixed = false;
}
});
});

Your problem most likely comes from this part.
var shouldBeFixed = scrollTop > navHomeY;
if(shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
width: nav.width()
});
isFixed = true;
Try inversing or removing that part all together. It is saying if the navbar is not at the top, add a position of fixed to it as well as nav.width(), whatever you set that to equal - and this is precisely the opposite of what you want because it's what your problem is according to the question.

Change a header's position dynamically when activating drop down menu

I have a drop down menu that sits inside a header that is set to position: fixed. When viewed on a mobile device, I want the header to remain fixed, but when the menu is activated, jQuery dynamically changes the header's position to relative. That works fine (see code below), but there are a few problems that I need to fix. If the menu-toggle link is clicked again (closing the menu), the header does not return to its previous state "relative". Is there a way to do this? I also notice a flicker, so let's say you scroll half way down the page, then click on the menu to open it, the page sort of jumps and does not scroll back to the top where the menu is located inside the header as it should. I would prefer a pure CSS solution, but that seems impossible. I COULD set the rules so that if it's less than 499 pixels wide, the header gets positions "relative", but then usability fails, as a user will have to scroll up to the top of the page to access the drop down menu.
Any help would be greatly appreciated.
Here is my code:
HTML
<header role="banner" class="secondary">
<em>Menu</em> <span aria-hidden="true"></span>
<nav id="nav" role="navigation">
<ul class="menu set">
<li class="subnav">
Link
<ul class="sub-menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</nav>
</header>
CSS
header[role="banner"] {
width: 100%;
background: #fff;
display: block;
margin: 0 auto;
padding: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
z-index: 10000;
}
#media all and (min-width: 500px) {
header[role="banner"] {
position: fixed;
top: 0;
left: 0;
clear: both;
height: auto;
display: block;
}
}
#media all and (max-width: 499px) {
header[role="banner"] {
position: fixed;
}
}
JAVASCRIPT
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#nav'),
$menulink = $('.menu-toggle'),
$menuTrigger = $('.subnav > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
var add_toggle_links = function() {
if ($('.menu-toggle').is(":visible")){
if ($(".toggle-link").length > 0){
}
else{
$('.subnav > a').before('<span class="toggle-link">Open</span>');
$('.toggle-link').click(function(e) {
var $this = $(this);
$this.toggleClass('active').siblings('ul').toggleClass('active');
});
}
}
else{
$('.toggle-link').empty();
}
}
add_toggle_links();
$(window).bind("resize", add_toggle_links);
});
$(document).ready(function() {
$('.menu-toggle').click(function() {
if ($( document ).width() < 499)
$('header[role="banner"]').css('position', 'relative');
});
});

So you don't actually have any js code in there that will switch the position of your header between fixed and relative.
What I would do is maybe toggleClass on your header.
$(document).ready(function() {
$('.menu-toggle').click(function() {
if ($( document ).width() < 499){
$('header[role="banner"]').toggleClass('active');
}
});
});
Then in your css
header[role="banner"] {
position: fixed;
}
header[role="banner"].active {
position: relative;
}
The screen jump you're getting is probably from changing the position from fixed to relative, because relative will add the header back to the normal page flow. So to fix this, you could also toggle the class of whatever is below your header, so when active, it has a margin-top of 0, and when inactive, it has a margin-top equal to the height of the header.