Develop Reference

Display specific div with scroll in wordpress

I've created a slider in the footer with shortcode (in a div id #oter) and I need to display none on load and display on onscroll.
Now I have this by plugin:
!function(e){e(document).ready(function(){var n=0;e(window).scroll(function(){var o=e(this).scrollTop();o>n?e("#oter").fadeOut(200):e("#oter").fadeIn(200),n=o})})}(jQuery);
Can I change to: hidden onload and display onscroll?
Can you help me?
Thanks!

I would hide this by default with CSS and then on scroll, add a new class which would then show it.
$(function() {
var footerslider = $("#oter");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
footerslider.addClass('show');
} else {
footerslider.removeClass("show");
}
});
});
UPDATE:
you are getting a console error... try updating the code to:
**please note that you will need to change the value inside the if statement so that the class gets added at the right scroll point.
jQuery(function($) {
var footerslider = $("#oter");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
footerslider.addClass('show');
} else {
footerslider.removeClass("show");
}
});
});
and add the following css to your stylesheet:
#oter {
display:none;
}
.show {
display:block !important;
}

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

Change CSS properties when the element passes a specific position

my page contains a header which stays on top of a dark image. The image is the exact same size as the viewport from the browser.
My goal is, when I scroll down the page and the header passes the image completely, that the background-color of the header changes.
Is that possible - and how?
Thanks

You can done it by using jquery's "scrollTop":
$(window).scroll(function() {
if ($(window).scrollTop() > sumValue) {
$('#header').css('background', 'yellow');
}
})
"sumValue" refer the amount of scroll you want the user to travel until you change the background.

Please look at the Fiddle
$(function() {
var image = $('.image'),
winHgt = $(window).innerHeight();
image.css({ height: winHgt });
$(window).scroll(function() {
var header = $('#header'),
winHgt = $(window).innerHeight();
if ($(window).scrollTop() > winHgt) {
$('#header').css({ background: '#333' });
}
else if ($(window).scrollTop() < winHgt) {
$('#header').css({ background: '#888' });
}
});
});