We Keep Coding

How do I code JQuery so that when I scroll to a certain element, Nav bar appears at top, when I scroll back up past that element, nav bar disappears

I have a div called #menu which I want to display when I scroll past the element #section3, if I scroll up past that element again, I want #menu to disappear
How would I code this?

Maybe something like this?
scrolled = "no"
$(window).scroll(function(){
scr = $("body").scrollTop();
if (scr > 100 && scrolled == "no"){
$("#menu").css({"display:block"})
displayed = "yes"
}
if (displayed == "yes" && scrolled = "yes"){
$("#menu").css({"display:none"})
}
});
The above assumes that #section3 is 100 pixels down the page. If you do not know where its going to be on the page then you could use the method outlined here:
Trigger event when user scroll to specific element - with jQuery

With jQuery you can get the scroll position with $("body").scrollTop();.
Expanding on what #Ned Hulton said, I recommend comparing the scroll position to the top of a "container element" (or 'row') in your page like this:
if ($('body').scrollTop() > $('#someRow').offset().top){
//do something
}
That way you can account for your container appearing at a variable distance down the page (which will come in handy for mobile browsing or cases where your text wraps to additional lines)

I just whipped this up in jsfiddle
https://jsfiddle.net/rb56j0yu/
it uses jQuery, and checks the scroll position against the target div. Css sets the menu as position: fixed, and defaults to hidden.
$(window).scroll(function(){
var yPos = $("body").scrollTop();
var yCheck = $("#c3").position().top;
if (yPos > yCheck && !$("#menu").is(":visible"))
{
$("#menu").show();
}
if (yPos <= yCheck && $("#menu").is(":visible"))
{
$("#menu").hide();
}
});

First, get your #section3 top offset and height. Which will be used as the threshold whether #section3 is actually on the window screen.
var top = $('#section3').offset().top;
var bot = topOffset + $('#section3').height();
Then, detect it on your scroll event.
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop >= top && scrollTop <= bot) {
// #section3 is within the screen.
$('#menu').show();
}
else {
// #section3 is out of screen.
$('#menu').hide();
}
});

This is a common use case, I wrote following code:
// what does "Auto Header" mean, goto https://www.yahoo.com/
// scroll down and you will see the purple part auto fixed to top,
// while when scroll up, it restores and does not be fixed.
// 1. multiple auto header elements handled
// 2. dynamically create/remove elements issue handled
// 3. no unnecessary dom operation, high performance
// usage: just add 'class="auto-header"' to any element you want to auto header
// suggest set each auto-header element specific width and height
// do not guarantee it works when resize or scroll left/right
$(document).ready(function() {
var rawTops = [],
rawLefts = [],
rawStyles = [],
$locations = [], // record next sibling so that element easily find where to restore
fixed = []; // mark whether this element is fixed
$(".auto-header").each(function() {
var $this = $(this),
offset = $this.offset();
rawTops.push(offset.top);
rawLefts.push(offset.left);
rawStyles.push($this.attr("style"));
$locations.push($this.siblings().eq($this.index()));
fixed.push(false);
});
$(window).on("scroll", function() {
$(".auto-header").each(function(i, e) {
if(!fixed[i] && $(window).scrollTop() > rawTops[i]) {
var $te = $(this).clone(true);
$(this).remove();
$locations[i].before($te);
$te.css({
"position": "fixed",
"top": 0,
"left": rawLefts[i],
"z-index": 100
});
fixed[i] = true;
} else if(fixed[i] && $(window).scrollTop() < rawTops[i]) {
$(this).removeAttr("style").attr("style", rawStyles[i]);
fixed[i] = false;
}
});
});
});

sticky sidebars in several div

i got for each div an sidebar and i wanted do get all the sidebars by scrolling down fixed.
you can find it here
var tmpWindow = $(window),
sidebar = $('.sidebar'),
sidebarHeight = sidebar.height(),
offsetBottom = $('.content').outerHeight();
$(window).scroll(function() {
if ($(window).scrollTop() >= sidebarHeight) {
$('.sidebar').addClass('fixed');
alert(sidebarHeight);
} else {
$('.sidebar').addClass('fixed');
}
});
http://jsfiddle.net/dLdvv6um/
if i use the js it will disappear...

You're adding a class called "fixed", yet you don't have a class with that name specified in your css. Use .css() if you want to add straight css properties instead: .css({"position": "fixed"});.

How to make an element hide on scroll down in wordpress

I need to make a search bar hide when scrolling down the page.
I know this is done in jquery, but I really have no clue where to start. I don't know the code I need and how/where to include it in Wordpress correctly.
This is where it is http://uwinat.o2clite.com/
Can someone help?
Thank you.

<script>
//when user start scrolling
jQuery(document).on("scroll", function () {
//hide search bar
jQuery('.header .search').removeClass('animated');
jQuery('.header-cont').removeClass('search-active');
});
</script>
Place this code at the bottom of the HTML page should be ok

someid - target
300 -means top offset px
visible - remove or add class and hide target by default
or reverse - add another class which hide elem on scroll
var foo = function() {
var arrow = document.getElementById('someid');
window.document.addEventListener('scroll', function() {
var topOffset = document.documentElement.scrollTop || document.body.scrollTop;
topOffset > 300 ? arrow.classList.add('visible') : arrow.classList.remove('visible');
});
};
foo();

Is it possible to hide one div and show another div after scrolling 50% or more?

i have one section inside 2 DIV's where the div's name 1st div and 2nd div . By Default 2nd div will be hidden, after scrolling 50% or more 1st div will be hidden and 2nd div will be displayed. How do i do that?
I used:
var heightDivid = $(window).height() / 2;
$(window).on('scroll', function(e){
$('.sections-class').each(function(){
if(this.getBoundingClientRect().top <= heightDivid ){
$(this).removeClass('heightDivids') ;
}
else{
$(this).addClass('heightDivids') ;
}
})
})

Perhaps you can alter something along these lines to do what you're attempting to do.
Utilize jQuery's scrollTop to identify where you want the change to occur.
Set a limit for when you want to hide the one div and show the two div.
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 10) {
$('.two').show();
$('.one').hide();
}
});
Example: http://jsfiddle.net/xv2m4qn6/
If you want the effect to reverse simply add a second conditional:
Example: http://jsfiddle.net/xv2m4qn6/1/

At Last I did :) and it's work for me .... Thank you all for your help :)
var shadowEdgePoint = $(window).height() / 2;
$(window).on('scroll', function(e){
$('.section-class').each(function(){
if(this.getBoundingClientRect().top <= shadowEdgePoint){
$('.two').show();
$('.one').hide();
}
else{
$('.two').hide();
$('.one').show();
}
})
});

jQuery infinite scrolling scrolling in fixed div

Background
I am trying to create an infinite scrolling table inside a fixed position div. The problem is that all the solutions I come across use the window height and document scrollTop to calculate if the user has scrolled to the bottom of the screen.
Problem
I have tried to create a jQuery plugin that can calculate if a user has scrolled to the bottom of a fixed div with overflow: scroll; set.
My approach has been to create a wrapper div (the div with a fixed position and overflow: scroll) that wraps the table, I also place another div at the bottom of the table. I then try calculate if the wrapper.scrollTop() is greater than the bottom div position.top every time the wrapper is scrolled. I then load the new records and append them to the table body.
$.fn.isScrolledTo = function () {
var element = $(this);
var bottom = element.find('.bottom');
$(element).scroll(function () {
if (element.scrollTop() >= bottom.position().top) {
var tableBody = element.find("tbody");
tableBody.append(tableBody.html());
}
});
};
$('.fixed').isScrolledTo();
See Example http://jsfiddle.net/leviputna/v4q3a/
Question
Clearly my current example is not correct. My question is how to I detect when a user has scrolled to the bottom of a fixed div with overflow:scroll set?

Using the bottom element is a bit clunky, I think. Instead, why not use the scrollHeight and height to test once the scrollable area has run out.
$.fn.isScrolledTo = function () {
var element = this,
tableBody = this.find("tbody");
element.scroll(function(){
if( element.scrollTop() >= element[0].scrollHeight-element.height()){
tableBody.append(tableBody.html());
}
});
};
$('.fixed').isScrolledTo();
EDIT (12/30/14):
A DRYer version of the plugin might be much more re-usable:
$.fn.whenScrolledToBottom = function (cback_fxn) {
this.on('scroll',this,function(){
if( ev.data.scrollTop() >= ev.data[0].scrollHeight - ev.data.height()){
return cback_fxn.apply(ev.data, arguments)
}
});
};
Plugin Usage:
var $fixed = $('.fixed'),
$tableBody = $fixed.find("tbody");
$fixed.whenScrolledToBottom(function(){
// Load more data..
$tableBody.append($tableBody.html());
});

I have modified your code to handle the scroll event with a timer threshold:
$.fn.isScrolledTo = function () {
var element = $(this);
var bottom = element.find('.bottom');
$(element).scroll(function(){
if (this.timer) clearTimeout(this.timer);
this.timer=setTimeout(function(){
if( element.scrollTop() >= bottom.position().top){
var tableBody = element.find("tbody");
tableBody.append(tableBody.html());
}
},300);
});
};
$('.fixed').isScrolledTo();
The issue you are having is that as you scroll, new scroll event is being generated. Your code might have other issues, but this is a start.