Develop Reference

Show one div when another div scrolls off screen. Getting unwanted flashes

I would like to show one div (.cu5-topbar) when another div (.cu5box-box) scrolls off screen. The problem is that the the .cu5-topbar div is showing up right as the .cu5box-box div is leaving the screen. That's also causing the .cu5-topbar to flashing for a few seconds while the two divs overlap each other. Here is my code so far:
var scroll_start = 0;
var startchange = jQuery('.cu5box-box');
var offset = startchange.offset();
if (startchange.length) {
jQuery(document).scroll(function () {
scroll_start = jQuery(this).scrollTop();
if (scroll_start > offset.top) {
jQuery('.cu5box-box').fadeOut(400);
jQuery('.cu5-topbar').fadeIn(400);
} else {
jQuery('.cu5box-box').fadeIn(400);
jQuery('.cu5-topbar').fadeOut(400);
}
});
}
https://jsfiddle.net/zgu70p4m/
I would like for the .cu5-topbar div to show up as soon the .cu5box-box div is completely off of the screen and I would like for the .cu5-topbar div to disappear as soon as the .cu5box-box div comes onto the screen.

Try the below, you had not included jQuery in your jsfiddle example.
You also needed to attach the scroll event to the window. Finally the offset needed the elements height added to the total to make sure you where getting the correct position of the end of the element.
var scroll_start = 0;
var startchange = jQuery('.cu5box-box');
var offset = startchange.offset();
if (startchange.length) {
$(window).scroll(function () {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top + startchange.height()) {
$('.cu5-topbar').fadeOut(400);
} else {
$('.cu5-topbar').fadeIn(400);
}
});
}

Can I reset a jQuery sticky navbar function?

I'm new here and I'm facing a little problem with a jQuery script I'm using to change my CSS when my sticky navbar scrolls over a certain section.
First, I'm using one class called ".stickychange", which is the trigger for the jQuery function. On this section, I'm using a background-image (one picture I've taken personally), and I want my white navbar to become transparent black when it's over this said section. And it's working like a charm. But after this section, I have a white section and I want my navbar to take its default style, but it doesn't.
If I'm scrolling back to the top, it's taking its default settings, but if I'm scrolling past the .stickychange, it would stay with the tweaked CSS styles.
Do you know how to reset a function, or at least, stop it when it reaches a certain point?
Here's the code, it's a basic code if you wanna change styles on elements while scrolling :
var scroll_start = 0;
var startchange = $(".stickychange");
var offset = startchange.offset();
if (startchange) {
$(document).scroll(function () {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top) {
$("#menu_top").css('background-color', 'rgba(0,0,0,0.5)');
$("#menu_top").css('transition', 'all 0.2s ease-in');
$("#menu_top a").addClass("stickyspecial");
$("#menu_top h2").addClass("stickyname");
} else {
$('#menu_top').css('background-color', '#fff');
$('#menu_top a').removeClass("stickyspecial");
$('#menu_top h2').removeClass("stickyname");
}
});
}
Thanks, guys in advance! :)

Get the height of the div and add this to your if.
var scroll_start = 0;
var startchange = $(".stickychange");
var offset = startchange.offset();
// Get the height with padding and border
// You could use .height() if you just want the height of the div.
var endchange = startchange.outerHeight();
if (startchange) {
$(document).scroll(function () {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top && scroll_start < offset.top + endchange) { //<- Add it here
$("#menu_top").css('background-color', 'rgba(0,0,0,0.5)');
$("#menu_top").css('transition', 'all 0.2s ease-in');
$("#menu_top a").addClass("stickyspecial");
$("#menu_top h2").addClass("stickyname");
} else {
$('#menu_top').css('background-color', '#fff');
$('#menu_top a').removeClass("stickyspecial");
$('#menu_top h2').removeClass("stickyname");
}
});
}
If you're using margin on the div and want it to be applied, use .outerHeight(true).

jQuery scroll function read when page scrolled at bottom?

I am working to make menu to change when users scrolling the page. It's working, but I have glitch that my code only working when I scrolled to the very bottom of page.
This is jQuery script :
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
$(window).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > 1) {
$(".home .navbar-default").css('background-color', '#000000');
$(".home .navbar-default").css('opacity', '0.8');
$(".page-template-page-full-width-php .navbar-default").css('background-color', '#000000');
$(".page-template-page-full-width-php .navbar-default").css('opacity', '0.8');
} else {
$('.home .navbar-default').css('background-color', 'transparent');
$('.page-template-page-full-width-php .navbar-default').css('background-color', 'transparent');
}
});
I was tried some codes including from this one. I modified the code, to looks just like my current code at above, but it's still only working when scrolled to the very bottom. This is my website. Anyone know why the code only working when scrolled at bottom? I tried to read the parameter with alert, but the alert only showing when I reached the very bottom of page with 32 as the value.

Highlighting current section in navbar

I have a scrolling page with a navbar and I want the section the user is scrolling through to be highlighted in the navbar. At the moment it almost accomplishes this, but is highlighting the incorrect link.
A demonstration is at http://codepen.io/meek/pen/NNprYb?editors=1000
The code that does this is as follows:
// highlight current tab
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
var section = $(sectionLink.attr('href'));
if(section.position().top <= currentPos && sectionLink.offset().top + section.height() >= currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
}
else {
sectionLink.parent().removeClass('active');
}
});
});
I've tried several things, but can't get it to reliably add the active class to the correct session. Help appreciated!
edit: to be clearer, the problem is that it's only highlighting the section when you've scrolled a bit into it, instead of right at the top, meaning that when you click a section to scroll to the top of that section automatically, that section is not highlighted.
edit2: So changing the if statement to:
if(currentPos + $('#nav-wrapper').outerHeight() >= section.position().top && currentPos + $('#nav-wrapper').outerHeight() <= sectionLink.offset().top + section.outerHeight()) {
has made an improvement although not completely fixed the issue. The home, about and portfolio sections all highlight the correct link but not contact.

You need to account for the height of the navbar and subtract it from the top of the section you want highlighted.
The height is currently hardcoded in your CSS at 75px but I included a jQuery selector for the height in case it needs to change/disappear for smaller screens.
Nice work by the way.
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
// capture the height of the navbar
var navHeight = $('#nav-wrapper').outerHeight() + 1;
var section = $(sectionLink.attr('href'));
// subtract the navbar height from the top of the section
if(section.position().top - navHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
} else {
sectionLink.parent().removeClass('active');
}
});
});

image related info showing while image centered when scrolling

I have the following problem:
I want image related captions in a div to show up while scrolling through my tumblr blog. So far I embedded the following code and managed to get it work:
script I used:
Fiddle
$(window).load(function () {
$(window).on("scroll resize", function () {
var pos = $('#captionposition').offset();
$('.post').each(function () {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
$('#captionposition').html($(this).find('.tags').text()); //or any other way you want to get the date
return; //break the loop
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
})
My blog
I am not sure how exactly "top" is defined, but it turned out being quite confusing for the viewer as there's no "pause" inbetween the captions and the div seems to pop up eventhough the image is not even fully visible in the window. Plus if two or even more images show up at the same time it's uncertain to which the info belongs.
What would I aim for?
I would love to have the div with the informations only visible for the image fully centered. center +/- 10% would be enough I guess (but would like to play around with this if possible). And a rather smooth fade in/out animation would be great as well.
I am super thankful in advance if anybody can help me!
original code:
{block:Photo}
<li class="post photo">
<ul class="post-data">
{block:IfPhotoIconImage}<li class="icon"></li>{/block:IfPhotoIconImage}
<li class="info"></li>
</ul>
<div class="post-content">
<div class="content-img-wrapper">{LinkOpenTag}<img src="{PhotoURL-1280}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{block:HasTags}
<ul class="tags" style="display: none;">
{block:Tags}
<li>{Tag} </li>
{/block:Tags}
</ul>
{/block:HasTags}
</li>
{/block:Photo}
<div id='captionposition'></div>
okay, so this is what worked well for me (check iris post for further explanations):
$(window).load(function () {
var window_center = $(window).height()/2;
var threshold = 0;
$(window).on("scroll resize", function () {
scroll = $(window).scrollTop();
//var pos = $('#captionposition').offset();
$('.post').each(function () {
var post_center = $(this).height()/2 + $(this).offset().top;
if (post_center + threshold < window_center + scroll ||
post_center - threshold < window_center + scroll) {
if (!$(this).hasClass('active')){
$('.post').removeClass('active');
$(this).addClass('active');
$( "#captionposition" ).hide();
$( "#captionposition").html($(this).find('.caption').text());
$( "#captionposition" ).fadeIn('slow');
}
return; //break the loop
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
})
</script>

Ok I made a Demo that could help you.
$(window).load(function () {
var window_center = $(window).height()/2;
var threshold = 0;
$(window).on("scroll resize", function () {
scroll = $(window).scrollTop();
$('.post').each(function () {
var post_center = $(this).height()/2 + $(this).offset().top;
if (post_center + threshold < window_center + scroll ||
post_center - threshold < window_center + scroll){
if (!$(this).hasClass('active')){
$('.post').removeClass('active');
$(this).addClass('active');
$('#captionposition').hide();
var newDescr = $(this).find('.tags');
$('#captionposition').html(newDescr.html());
$('#captionposition').fadeIn('slow');
}
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
});
Things to know:
I used $(window).scrollTop() as reference, so we know how much it's scrolled.
Added a Threshold variable, to set the +/- percent you wanted.
The scripts calculates the center of window and center of each .post.