Develop Reference

Adding class jQuery else if

I've got a fixed header on scroll adding class 'fixed' this works fine. I scroll down and after 50px class 'fixed' is added to my header container and when i scroll back up the 'fixed' class is removed.
Now on my blog pages i'd like the 'fixed' class to always be there, so on page load and even after scrolling up and down i'd like the class 'fixed' to always be added to my header container.
I'm using if else statements in my js but i can't seem to get it working right:
//Fixed header on scroll
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".header-wrapper").addClass("fixed");
} else if {
$('.blog .header-wrapper').addClass('fixed');
} else {
$(".header-wrapper").removeClass("fixed");
}
});
Any ideas how to sort this?

This makes more sense: Set the fixed class on the blog and test if we have a blog or not when adding the scroll event handler
$('.blog .header-wrapper').addClass('fixed');
if ($(".blog").length==0) {
$(window).scroll(function() {
$(".header-wrapper").toggleClass("fixed",$(window).scrollTop()>=50);
});
}
Do note that the scroll event is triggered every pixel so you may want to debounce it

You have to use conditions in the if clause like so:
//Fixed header on scroll
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".header-wrapper").addClass("fixed");
} else if($('.blog .header-wraper').length > 0) {
$('.blog .header-wrapper').addClass('fixed');
} else {
$(".header-wrapper").removeClass("fixed");
}
});

Jquery Hide header at first and show it on scroll up

Here’s a demo page.
https://codyhouse.co/demo/full-screen-pop-out-navigation/index.html
How to hide the header when the screen is on the top of the page, and it will only show on scroll up

hi try following...
$(window).scroll(function() {
var _hideVal = 50; //You can change this value...
if ($(window).scrollTop() > _hideVal)
{
$('.header-holder').fadeIn();
}
else
{
$('.header-holder').fadeOut();
}
});

Navbar add class after div scrolls with jQuery

I have problems adding a class to the navigation after scrolling to get a fixed class. My website has a video in the background and only the <div> with the .wrap class can scroll all the content. When scrolling I would like the navigation to be fixed on top.
This is my Javascript code:
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});
But the problem is that the body is in fixed position and only the content wrap is actually scrolling. How do I fix this?

Bind the scroll to the wrapper
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($('.wrapper').scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});

Change image through add/remove class in Javascript. What about at initial page scroll =0?

I'm currently trying to change my header logo when the user scrolls past the dark background to a lighter background. I got the add/remove class working, but right when the user loads the page the image doesn't show because it executes when the scroll is greater than 0 pixels scroll. How do I show the initial conditions from page load without the user having scrolled already?
$(function() {
var header = $(".logo");
var about = $(".angle").offset().top;;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= about) {
header.removeClass('lightLogo').addClass('darkLogo');
} else {
header.removeClass('darkLogo').addClass('lightLogo');
}
});
});

The simplest might be to just add the class initially, like so:
$(function() {
var header = $(".logo").addClass('lightLogo');
var about = $(".angle").offset().top;;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= about) {
header.removeClass('lightLogo').addClass('darkLogo');
} else {
header.removeClass('darkLogo').addClass('lightLogo');
}
});
});
Now the header will start out with .lightLogo at page load.

Static top navigation bar shows only after scrolling

I have a nav bar that stays on top after scrolling, but if you hit the back button or a link like so ...com/index#downbelow the nav bar does not appear until you scroll.
How can I get the nav bar to show no matter what?
var num = 60;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menutop').addClass('fixed');
} else {
$('.menutop').removeClass('fixed');
}
});
jsfiddle

In url when there are # not triggered scroll events. therefore menu will not be fixed. Add this code to top of my-jquery.js
var ssss=$(document).scrollTop();
if(ssss>=60) $('.menutop').addClass('fixed');

If you want it to always be fixed just remove that JavaScript and add the fixed class in the HTML.
<nav class="menutop fixed">

You can run it once on DOM-ready, then bind to scroll:
var toggleMenuVisibility = function() {
var num = 60;
if ($(window).scrollTop() > num) {
$('.menutop').addClass('fixed');
} else {
$('.menutop').removeClass('fixed');
}
}
$(function() {
toggleMenuVisibility();
$(window).bind('scroll', toggleMenuVisibility)
})