We Keep Coding

hide a div when scrolled to 100px refresh issue

I have a div which would be hidden after scrolling to 100px but then if they refresh the whole page when the scroller is at 180px or such its displaying, soon after i start scrolling it gets back to hidden.
how can i handle this situation of not to show even after refresh if the page is scrolled above to 100px
following is the script i am using to hide the div, what better i can do to this script to handle this issue
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('div').hide();
}
else
{
$('div').show();
}
});

made fiddle for you here
use class with height :100px and when scroll 100px, but change as you needed
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('.a').fadeOut();
}
else
{
$('.a').fadeIn();
}
});
and this is css
body {
height: 2000px;
}
.a {
height: 100px;
width: 100px;
background-color: green;
}

you must do the checking upon loading the document as well, you can do this with $(document).ready
(function(){
$(window).scroll(function() {
checkTop();
});
$(document).ready(function() {
checkTop();
});
function checkTop(){
if ($(window).scrollTop()>100)
{
$('#selectorToYourElement').hide();
}
else
{
$('#selectorToYourElement').show();
}
}
})();

Header appearence not working when refreshing the page

Well, I have a very simple code, that do something like... when you are at the top of the page, #header have background-color:transparent;, and as you start scrolling down, it has static black color. It works great, but every time, when I refresh the page, the header has the black color instead of transparent.... I tried making the offset in scrolling from the top heigher, but still nothing. (when I refresh it, it has black color, as i scroll down, still black color, but as i scroll to the top again, right at the top it works, and i have the color transparent. [it starts working when i just move with the scroll button, but not from the beginning{landing} on the page])... there is my code:
js:
$(window).scroll(function () {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
css (for header)
#header {
background-color: black;
height: 75px;
width: 100%;
top:0px;
position: fixed;
z-index: 10;
}
html:
<div class="container">
<!--HEADER-->
<div id="header">
<div id="main">
<img src="images/my_logo.png">
</div>
<div id="menu">
<img name="menu" src="images/my_menu.png">
</div>
</div>
<!--/HEADER-->

At the moment you're only running the function when you scroll the page. You need to also run your function on the page load...
$(function(){
// Run it on page-loaded
setHeaderColour();
// Run it on scroll
$(window).scroll(setHeaderColour);
});
function setHeaderColour() {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
This is because the changes that you make on the client are not stored after a refresh, and the page is back to how it was before. This will make sure that after the refresh you set the colour correctly
As per the comment by #Quantiastical, this is probably better code, as it will cover more events and keeps your function in one place...
$(function(){
$(window).on('load scroll resize orientationchange', function () {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
});

Well, i found my solution, which is the best. Simply change the background color of the header in css to transparent, so... when the page loads itself, the header has no appearance, when i start scrolling, the event-handler starts and jQuery do its job :) easy as a pie
#header {
background-color: transparent;
height: 75px;
width: 100%;
top:0px;
position: fixed;
z-index: 10;
}

Fade in/Fade out navigation bar

I'm trying to set my navigation bar to remain fixed and fade to 0.8 opacity when i scroll down and return to his normal position and opacity when i scroll back up.
my jquery code is :
jQuery(document).ready(function(){
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500,0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500,1);
}
});
});
and my css code is :
.fixed {
position:fixed;
top:0;
}
It fades out when i scroll down but doesnt return to his original opacity when i scroll back up.I'm new to jQuery.

I think the problem is that you're setting the fadeTo function on every firing of the scroll event. Thus, when you scroll down, you're adding many "fade out" calls to the animation effects queue. When you scroll back up, all of the "fade out" effects (each of which takes 1.5 seconds) have to finish before the first "fade in" call takes place.
You can fix this by adding a call to jQuery's .stop(true) so that each scroll event clears the animation queue:
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
jQuery("nav").stop(true);
if (scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500, 0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500, 1.0);
}
});
});
body {
height: 4096px;
padding-top: 32px;
}
nav {
height: 128px;
width: 100%;
border: 1px solid black;
background-color: #00aa00;
}
.fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>so</title>
<meta charset="UTF-8">
</head>
<body>
<nav></nav>
</body>
</html>
Note that this means the fadeTo animation won't take place until the user stops scrolling.

It's there another solution to do that? Because when i scroll back up the time that it takes for the "fadeTo" action is verry delayed(~4 secconds) i dont think that's normal.

jQuery sticky header flashes at specific height

I am using following code to make a menu sticky when the window is scrolled down. It works fine if the window height is enough to scroll down the full header area, but it it creates problem is the height is just close enough to scroll, in that case it starts flashing and does not let scroll.
Here is the demo of the problem, refresh couple of times and try to scroll down. I have set the body height to 622px to reproduce the problem:
http://jsbin.com/ipEROYO/1
Here's the code I'm trying:
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
CSS:
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

It's because when you are setting the navigation div to position:fixed you are shortening the length of the document (by the height of that div), which then causes the scroll bar to go away, which causes the scrollTop() value to be 0 which causes the .nav div to be position:static and it is an endless cycle if you keep scrolling down.
Here's my quick solution:
$(document).ready(function() {
var height = $('.nav').outerHeight();
$(window).scroll(function() {
if($(this).scrollTop() > height)
{
$('.nav').css('position','fixed');
$('body').css('padding-bottom',height+'px');
}
else if($(this).scrollTop() <= height)
{
$('.nav').css('position','static');
$('body').css('padding-bottom','0');
}
});
$(window).scroll();
});

Just modified the JSbin. Check it out. You were really close, just doing more than you needed to like setting the sticky class on load of the page rather than when the function first runs. Let me know if this helps.

try that
$(window).scroll(function () {
var scroll_top = $(this).scrollTop();
if (scroll_top > 66) {//height of header
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
});

Strongly recommend a CSS only solution for this layout. No one seems to know what to call this method, so I've been referring to it as the absolute stretch technique, but in my experience it works beautifully across mobile devices and PC's including all major browsers except IE6 and below. There is some discussion of it here.
body, .header, .nav, .mainContent{
position: absolute;
top: 0;
left: 0;
right: 0;
}
body, .mainContent {
bottom: 0;
}
.header{
height: 120px;
}
.nav{
height: 70px;
top: 120px;
}
.mainContent{
top: 190px;
overflow: auto;
}
You'll find you can get very robust, concise, well organized layouts in this manner, and fixed headers, footers and sidebars follow very easily.

Animating DIV to Bottom of page and then on another click animate again to Top

i was working on this div animation where the original position of div from top is 70% and the div is absolute.
Now, when I click on button it slides to bottom of page with top:95%.
Now I want to check if the position is top:95% and if so, then i want to slide it back to top:70%;
Somehow the Div slides to 95% but dosent come back. what i am doing wrong here??
code
css:-
#mainMenu {
width: 100%;
height: 30px;
background-color: black;
top: 70%;
position: absolute;
}
body {
margin: 0px;
}
#clickToCheck {
font-size: 22px;
}
JQuery
<script>
$(document).ready(function () {
$('#mainMenu').click(function () {
$("#mainMenu").animate({ top: "95%" }, 1100);
});
});
$(document).ready(function () {
$('#clickToCheck').click(function () {
if ($('#mainMenu').position().top === '95%') {
$("#mainMenu").delay(1000).animate({ top: "70%" }, 1200);
} else {
alert('its not at bottom');
}
});
});
and Html
<body>
<span id="clickToCheck">Click to CHeck</span>
<div id="mainMenu"></div>

The problem is that the function
$('#mainMenu').position().top
Will return the value in pixels instead of percentage. So if you want to check if the top is 95% you will have to do the math based on the top and window height (or div height). here is the code:
$('#mainMenu').position().top/$(window).height()*100
Here you will have the the percentage of the #mainMenu in relation to the full window. If the #mainMenu is inside a div, just do based on the div's height. Also beware that you will probably get a number like 94.2343123. So when checking, I would not do and "if = 95". I would do something like "if >= 93" or something like it.

The basic problem is that .position(), .offset(), and .css() all work in pixels by default.
A reasonable workaround would be to store the the menu's original .offset() using .data() and just check to see if its offset has changed, like so:
Working Example
$(document).ready(function () {
$('#mainMenu').data('startPos', $('#mainMenu').offset().top); // when the doc is ready store the original offset top.
$('#mainMenu').click(function () {
$("#mainMenu").animate({
top: "95%"
}, 1100);
});
$('#clickToCheck').click(function () {
if ($('#mainMenu').offset().top > $('#mainMenu').data('startPos')) { // if new offset is greater than original offset
$("#mainMenu").delay(1000).animate({
top: '70%'
}, 1200);
} else {
alert('its not at bottom');
}
});
});