Develop Reference

ScrollTop not reverting back when scroll to top

Having problems with Scrolltop - have got it to change smoothly when scrolling down, but doesn't revert to the original css when scrolling back up.
I've tried switching the order around but nothing works. Can anyone tell me where my code is wrong?
Thanks
$(function() {
var topblock = $(".topblockfix");
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() > $('.topblockfix').offset().top) {
if (scroll >= 250) {
topblock.removeClass("topblockfix").addClass("topblockfix-alt");
header.removeClass("header").addClass("header-alt");
} else {
topblock.removeClass("topblockfix-alt").addClass("topblockfix");
header.removeClass("header-alt").addClass("header");
}
}
});
});

You have a logical mistake in the first if-statement.
You are checking the offset top of $('.topblockfix'). But you remove the class .topblockfix and set it to .topblockfix-alt.
So you need to update your if statement:
if ($(window).scrollTop() > $('.topblockfix').offset().top || $(window).scrollTop() > $('.topblockfix-alt').offset().top) {
or you have to cache the value of $('.topblockfix').offset().top somewhere

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

Remove class if other class present at scroll height

I need to hide an element on scroll - but only if its not already hidden.
I've written the following jQuery but it's not working for some reason - any tips please?
The css class open-style-switcher and close-style-switcher determine a css scroll anim. I want to wait until the page has scrolled to a certain height, then auto hide the search box if it contains the open class.
Where am I going wrong!?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$('#search-box').hasClass('open-style-switcher').toggleClass("open-style-switcher", "close-style-switcher", 1000);
}
});

"toggleClass" can receive two classes separated by space
Also creating "$searchBox" variable to avoid double search in DOM.
And as was told before: hasClass() returns boolean
Here it is:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
var $searchBox = $('#search-box');
if ($searchBox.hasClass('open-style-switcher'))
{
$searchBox.toggleClass("open-style-switcher close-style-switcher", 1000);
}
}
});

.hasClass() - Returns: Boolean determines whether any of the matched elements are assigned the given class.
In your scenario, addClass and removeClass is more suitable.
See below :
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var searchbox = $('#search-box');
if (scroll >= 500 && searchbox.hasClass('open-style-switcher')) {
searchbox.removeClass("open-style-switcher");
searchbox.addClass("close-style-switcher", 1000);
}
});

toggleClass() does not work in the way you, or even the other answers, think it does. It only adds and removes classes, not exchange them for others. See toggleClass() documentation here.
if (scroll >= 500) {
if($('#search-box').hasClass('open-style-switcher'))
{
$('#search-box').removeClass("open-style-switcher");
$('#search-box').addClass("close-style-switcher");
}
}
I imagine you will also want an else block that does the inverse of this. Perhaps the below is a more straight forward way of doing what you want to achieve as there may not be any point in the check to see if the #search-box already has the open-style-switcher class.
if (scroll >= 500) {
$('#search-box').removeClass("open-style-switcher").addClass("close-style-switcher");
}
else
{
$('#search-box').removeClass("close-style-switcher").addClass("open-style-switcher");
}

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.

Sidebar jumps uncontrollably when the height is modified on scroll

I have a sidebar on my site that is fixed to the side and when the user scrolls down or up, the style attribute top is changed so that the height is adjusted.
$(window).scroll(function() {
if ($(this).scrollTop() < 125){
var v = 125 - $(this).scrollTop();
$("#sidebar").css({'top':v + 'px'});
}
if ($(this).scrollTop() >= 125)
{
$("#sidebar").css({'top':'5px'});
}
});
However, when I scroll down, the sidebar seems to jump uncontrollably and does not stick to the screen as I would like. I am using Chrome 32 so I don't see what the problem is. Please can someone help me with this issue.

Check out this fiddle.
Create a CSS class called fixed.
.fixed {
position: fixed;
top: 0px;
}
On scroll, in your JavaScript add and remove the "fixed" class accordingly to make the proper effect.
JavaScript:
$(function () {
var $sidebar = $('#sidebar');
$(window).on('scroll', function () {
if($(this).scrollTop() < 125) {
$sidebar.removeClass('fixed');
} else {
$sidebar.addClass('fixed');
}
});
});
As the header scrolls out of the window, the sidebar gets the "fixed" class and sticks to the side of the screen at the top left (0,0) respectively. When the header is coming back into view, the class is removed and the sidebar moves gracefully back to it's original position.