We Keep Coding

How do I add a class to the body using jQuery, scrollTop, and toggleClass

I have a question concerning jQuery's scrollTop functionality, and it's ability to toggle a class based on the amount of vertical scroll.
What I am trying to accomplish is on any page with a "section.banner" class, that after you scroll past the banner a class is applied to the body tag. This will allow me to change the fill colors of several SVGs that are in the site's header, as well as a fixed positioned side nav that is for pagination.
I am terrible at javascript, and have been stuck searching and trying to get this for hours. any help will be greatly appreciated. Here's the code that I'm working with now (CodeKit is telling me it is wrong, which I am not surprised). The value of 200 is just a placeholder and will be calculated by the height of a fluid image. Full disclosure, I have no idea if the brackets and parenthesis are correct.
// Header/Fixed Pagination Banner Scroll Recoloriing (toggle class)
// Check If '.banner' Exists
if( $('section.banner').length > 0) {
$('body').scrollTop(function)()
{
if $(window).scrollTop >= 200 {
$('body').toggleClass('downtown');
return false;
}
}
}

Try something like this :
if( $('section.banner').length > 0) {
$(window).scroll(function() {
{
if ($(window).scrollTop() >= $('section.banner').scrollTop()) {
$('body').toggleClass('downtown');
return false;
}
});
}
UPDATE
There was little mistake in my code : http://jsfiddle.net/t2yp15hq/
var top = $('section.banner').position().top;
if($('section.banner').length > 0) {
$(window).scroll(function() {
if ($(this).scrollTop() >= top) {
$('body').addClass('downtown');
}
else
{
$('body').removeClass('downtown');
}
});
}
It does not work with toogleClass, the background is flashing.
UPDATE
http://codepen.io/anon/pen/wBWzXy
The solution is to recalculate the top when the window is resized :
$(window).resize(function(){
top = $('section.story-intro').offset().top - 90;
});

Waypoint.js: Add class when N distance to top

I dont know if it is easy or not, but i just cant figure out something with Waypoint.js
I need to add a class to #stickytop when user reach, for ex, 100px of scroll
Any idea how to do this?
offset is not working for me.
Thanks in advance

This is not really the use case for jQuery waypoints. It's designed for testing how far specific elements are from the top of the screen, not how far a user has scrolled.
However you can easily do what you want with jQuery:
$(document).on('scroll', function () {
// if the scroll distance is greater than 100px
if ($(window).scrollTop() > 100) {
// do something
$('#stickytop').addClass('myClass');
}
});
Or vanilla JavaScript:
document.addEventListener('scroll', function () {
if (window.scrollY > 100) {
var el = document.getElementById('#stickytop');
el.className = el.className + " myClass";
}
})

Having issue in implementing effect like facebook right sidebar scroller

I am trying to implement effect like facebook right sidebar scroller but if the data changes dynamically then it does not work properly?
Here is my javascript code:-
var target = $('.aside');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.css('margin-top','-1000px');
target.css('margin-bottom','30px');
}
else {
target.css('margin-top','0px');
}
});

Have you looked into Scroll Spy?
https://github.com/sxalexander/jquery-scrollspy
I believe it does what you are tying to accomplish

Show id when div is halfway up

So I know how to actually get ids and classes and do the basics but I'm not sure how to do this:
"When the user scrolls down, the title of the post that takes up half the screen should be shown."
The setup is supposed to look something like this...
Any ideas?

You need to use JS and I used jQuery to do a simple prototype
It's all about listening to the scroll event and dealing with the offset of the elements from top you need to add a simple condition for the heights but now it's just working fine
$(window).scroll(function(){
var scrolledTop = $(this).scrollTop();
console.log(scrolledTop);
$(".blog").each(function(){
if($(this).offset().top < scrolledTop)
{
$('#blogname').html($(this).html());
}
});
});
Check out this http://jsfiddle.net/GkrCU/2/
I hope this can help :)

Here is my answer
$(window).scroll(function () {
var windowheight = $(this).scrollTop();
$(".blog").each(function () {
var sc = $(this).offset().top;
var id = $(this).attr('id');
if (sc < windowheight) {
$("#blogname span").html(id)
}
});
});
http://jsfiddle.net/GkrCU/1/

Scrolling to Div IDs with Jquery

Due to css properties my scrolling to div tags has too much margin-top. So I see jquery as the best solution to get this fixed.
I'm not sure why this isn't working, I'm very new to Js and Jquery. Any help us greatly appreciated.
Here is a quick look at Js. I found that when your div ids are in containers to change the ('html, body') to ('container)
Here is my jsfiddle
jQuery(document).ready(function($){
var prevScrollTop = 0;
var $scrollDiv = jQuery('div#container');
var $currentDiv = $scrollDiv.children('div:first-child');
var $sectionid = 1;
var $numsections = 5;
$scrollDiv.scroll(function(eventObj)
{
var curScrollTop = $scrollDiv.scrollTop();
if (prevScrollTop < curScrollTop)
{
// Scrolling down:
if ($sectionid+1 > $numsections) {
console.log("End Panel Reached");
}
else {
$currentDiv = $currentDiv.next().scrollTo();
console.log("down");
console.log($currentDiv);
$sectionid=$sectionid+1;
console.log($currentDiv.attr('id'));
var divid =$currentDiv.attr('id');
jQuery('#container').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');
}
}
else if (prevScrollTop > curScrollTop)
{
// Scrolling up:
if ($sectionid-1 == 0) {
console.log("Top Panel Reached");
}
else {
$currentDiv = $currentDiv.prev().scrollTo();
console.log("up");
console.log($currentDiv);
$sectionid=$sectionid-1;
var divid =$currentDiv.attr('id');
jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');
}
}
prevScrollTop = curScrollTop;
});
});

I'm not entirely sure what you want but scrolling to a <div> with jQuery is simpler than your code.
For example this code replaces the automatic jumping behaviour of anchors with smoother scrolling:
$(document).ready(function(e){
$('.side-nav').on('click', 'a', function (e) {
var $this = $(this);
var top = $($this.attr('href')).offset().top;
$('html, body').stop().animate({
scrollTop: top
}, 'slow');
e.preventDefault();
});
});
You can of course adjust the top variable by adding or removing from it like:
var top = $($this.attr('href')).offset().top - 10;
I have also made a fiddle from it (on top of your HTML): http://jsfiddle.net/Qn5hG/8/
If this doesn't help you or your question is something different, please clarify it!
EDIT:
Problems with your fiddle:
jQuery is not referenced
You don't need jQuery(document).ready() if the jQuery framework is selected with "onLoad". Remove the first and last line of your JavaScript.
There is no div#container in your HTML so it's no reason to check where it is scrolled. And the scroll event will never fire on it.
Your HTML is invalid. There are a lot of unclosed elements and random tags at the end. Make sure it's valid.
It's very hard to figure out what your fiddle is supposed to do.