scrollTop() shows result only after page refresh - javascript

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>

Related

How do I keep a div hidden when window is scrolled to top?

I have an up arrow that fades in when my page is scrolled down. How can I make it so that it fades out when the user scrolls back to the top of the page?
This is what I have so far. The arrow will disappear for a brief second then fade back in which I don't want - it should stay hidden.
function footerFadeIn() {
$(window).scroll(function() {
$('footer').fadeIn('slow');
});
}
function footerFadeOut() {
$('footer').fadeOut('slow');
$('footer').hide();
}
$(window).scroll(function() {
if ($(window).scrollTop() == 0) {
footerFadeOut();
} else if ($(window).scrollTop() > 0) {
footerFadeIn();
}
});
footer {
position: fixed;
bottom: 0;
right: 0;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<i class="fas fa-chevron-up" style="font-size: 35px;"></i>
</footer>
My thought process here is to have two functions - footerFadeIn() and footerFadeOut(). Then I have an if statement that checks if the window is scrolled away from scrollTop() of zero and executes the respective function.
EDIT: My question differs from the suggested one in that I simply had two event handlers that were causing the issue.
The issue is because you have added a scroll event handler inside footerFadeIn(). As such you end up creating another new scroll event handler when a scroll event happens. To fix this, just remove the scroll handler in that function and leave the main one which is called when the DOM loads.
Also note that you need to call hide() in the callback of fadeOut(). This is why the fadeout animation doesn't happen correctly. Try this:
function footerFadeIn() {
$('footer').fadeIn('slow');
}
function footerFadeOut() {
$('footer').fadeOut('slow', function() {
$(this).hide();
});
}
$(window).scroll(function() {
if ($(window).scrollTop() == 0) {
footerFadeOut();
} else if ($(window).scrollTop() > 0) {
footerFadeIn();
}
});
html,
body {
height: 2000px;
}
footer {
position: fixed;
bottom: 0;
right: 0;
padding: 20px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<footer>
<i class="fas fa-chevron-up" style="font-size: 35px;"></i>
</footer>

jQuery fixed navbar that shrinks to a smaller size on scroll is being super buggy

When using a combination of jQuery and CSS to trigger my navbar to shrink on scroll, it get's buggy when you scroll back up to a certain position, I have linked a video as an example.
I have tried two different methods. The first is using $(window).scrollTop) with an if statement and a series of .addClass and .removeClass. The second thing I have tried is using $(window).scrollTop) with a series of .css dynamic style modifications. Both of these attempts render the same end result that is shown in this video https://youtu.be/YXKsrL1cghs .
My first jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").removeClass("py-5");
$(".navbar").addClass("compressed");
} else {
$(".navbar").addClass("py-5");
$(".navbar").removeClass("compressed");
}
});
});
My second jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").css({ "padding-top": "10px" });
$(".navbar").css({ "padding-bottom": "10px" });
} else {
$(".navbar").css({ "padding-top": "3rem" });
$(".navbar").css({ "padding-bottom": "3rem" });
}
});
});
My CSS:
.navbar.compressed {
padding-top: 10px;
padding-bottom: 10px;
}
My expected results would be a smooth scrolling fixed navbar that shrinks to a smaller size after scrolling beyond a certain point.
What actually occurs is that when you scroll down past a certain point, for 20px worth of height, it gets super buggy and starts bouncing up and down. Once you clear those 20 or so px it's perfectly fine, but when you scroll back up it acts the same within those 20px.
When watching the video, I noticed that your .navbar has transition: all .3s. It could be the reason that when you remove the class py-5 and add class compressed, it triggers the transition twice.
It would be helpful if you can provide the HTML markup and CSS as well.
The script is manipulating the DOM quite a lot. I am not sure if this is going to fix your problem but it might be a good idea to only change the classes if the have not yet been applied.
$(document).ready(function() {
$(window).on("scroll", function() {
let navbar = $(".navbar");
if ($(window).scrollTop() >= 40) {
if (navbar.hasClass("py-5")) {
navbar.removeClass("py-5");
navbar.addClass("compressed");
}
} else {
if (navbar.hasClass("compressed")) {
navbar.addClass("py-5");
navbar.removeClass("compressed");
}
}
});
});
body {
height: 10000px;
position: relative;
}
.navbar {
width: 100%;
position: fixed;
height: 50px;
top: 0;
transition: all .3s
}
.py-5 {
background-color: blue;
padding-top: 10px;
padding-bottom: 10px;
}
.compressed {
background-color: red;
padding-top: 0px;
padding-bottom: 0px;
}
<html>
<head></head>
<body>
<nav class="navbar py-5">Navigation</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

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

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

Categories