We Keep Coding

scrollTop() shows result only after page refresh

Hii I am working on jquery but my code working in a weird manner.
Here is my code
$(document).ready(function() {
if($(window).scrollTop() >= 50) {
$("h1").fadeIn("slow");
};
})
I want my text to fadein when scroll. But my text appear ony after I refresh page after scrolling.
I dont know Why what is wrong with my code.

As I wrote above in the comment, you need to wrap your logic in a window scrolling event. Like this:
$(window).scroll(function() {
if($(window).scrollTop() >= 50) {
$("h1").fadeIn("slow");
}
})
I made an example for you by specifying the position: sticky for the h1 tag so that you can visually understand how the code works.
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() >= 50) {
$("h1").fadeIn("slow");
}
})
})
body {
height: 3000px;
}
h1 {
display: none;
position: sticky;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Test_Text</h1>

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

Auto-scroll to section

I need to automatic, smooth scroll from section #banner, to section #about-me if in section #banner will event scroll.
I try this:
$('#banner').bind('scroll', function(event) {
$(window).scrollTo($('#about-me'), 500);
});
but it not working. (I used scrollTo plugin).
#banner have height 100vh.

The delegation that you are looking for is mousewheel. You need to use e.preventDefault(); to block the default behavior (scroll) of the browser.
Working demo:
$('#banner').bind('mousewheel DOMMouseScroll', function(e) {
if (e.originalEvent.wheelDelta < 0) {
e.preventDefault();
$(window).scrollTo('#about-me', 500);
}
});
body {
margin:0;
}
div {
width:100%;
height:100vh;
}
#banner {
background:red;
}
#about-me {
background:green;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<div id="banner"></div>
<div id="about-me"></div>
http://jsbin.com/dubaza/edit?html,css,js

How do I make a hidden div ease out from the top instead of from the left using .show()?

I am trying to animate my navigation menu to bounce in from the top when it reaches a certain anchor point. I am currently using the .show()/.hide() to accomplish this, but it only eases in from the left. I tried to incorporate .animate() into it with no luck.
This is what I have so far:
var t = $("#about").offset().top;
$(window).scroll(function(){
if( $(document).scrollTop() >= t ) {
$('#global-nav').show(500, 'easeOutBounce');
} else {
$('#global-nav').hide(500, 'easeInExpo');
}
});
html {
height: 2000px;
}
#global-nav {
height:50px;
background:#000;
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
display: none;
}
#about{
margin-top:400px;
}
<div id="global-nav"></div>
<div id="about"></div>
I am using the jQuery Easing plugin and have the current code functional here, just scroll down to see it in action: http://jsfiddle.net/Hysteresis/0oazqj4y/30/
Is there an option for .show() to specify the ease in direction or do I need to incorporate the .animate() some how? I am fairly new to jQuery and have been working on this all day to no avail. Any help would be appreciated.

Try using .SlideDown() function in jQuery http://api.jquery.com/slidedown/

Try using slide() or its variants. Here's an example with slide down to show and slide up to hide:
$(window).scroll(function(){
if( $(document).scrollTop() >= t ) {
$('#global-nav').slideDown(500, 'easeOutBounce');
} else {
$('#global-nav').slideUp(500, 'easeInExpo');
}
});

JQuery animate is not working in firefox

I have Jquery script to play navbar animation on one page and disable it on another page. it works on chrome but not on firefox. Heres my code:
var URL = window.location.pathname;
URL = URL.split("/");
if(URL[1] != 'holiday') {
$('.navbar').addClass('hide-menu');
$(window).scroll(function() {
slider();
});
} else {
$(".navbar").addClass('show-menu');
}
The slider function :
function slider() {
if (document.body.scrollTop > 500)
$('.navbar').stop().animate({
"margin-top" : '0'
});
else
$('.navbar').stop().animate({
"margin-top" : '-150px'
});
}
The CSS:
.show-menu {
margin-top: 0px;
}
.hide-menu {
margin-top: -150px;
}
Firefox hide the menu but it fail to play the animation and show the menu back. Any suggestion guys? thanks

You have to get the scroll amount from the element that actually has the scrollbar. Firefox considers that to be the <html> element.
You can wrap all your content in a container that's got overflow: auto set, and then use that as the thing to check for scroll amount as well as the place to put the scroll event handler. Here's a jsbin.
<body>
<div id=everything>
<div class=navbar>
HELLO WORLD
</div>
<!-- content ... -->
</div>
</body>
and CSS:
html, body { height: 100%; padding: 0; margin: 0; }
#everything { height: 100%; overflow: auto; }