Show div after scrolling 100px from the top of the page - javascript

I found this, but this does it 100px before the bottom of the page. I need it 100px from the top of the page. I know how to implement it, I've done other jquery animations, just not what needs to be in this one.
$(window).scroll(function(){
if($(window).scrollTop() + 100 > $(document).height() - $(window).height() ){
alert("at bottom");
}
});
And also, I need to know how to reverse this so the div disappears when the user scroll back up before the 100px.
This will be used for a navigation bar.
Edit2> This worked also:
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$("#div").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 100){
$("#div").fadeOut("fast");
}
});

Try this:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
// > 100px from top - show div
}
else {
// <= 100px from top - hide div
}
});

Try this:
var menu = $("nav");
$(window).scroll(function(){
//more then or equals to
if($(window).scrollTop() >= 100 ){
menu.show();
//less then 100px from top
} else {
menu.hide();
}
});

I would recommend to do this:
$("#divname").hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$("#divname").fadeIn("slow");
}
else {
$("#divname").fadeOut("fast");
}
});
Now the div is already hidden when you visit your page.
Without this:
$("#divname").hide()
It would show and then perform a FadeOut. And that is not what you want.

Related

jQuery scroll for mobile

I need help with the Jquery scroll function. I want to make the scroll top position to be >= 300 on mobile, tablet, and >= 700 on desktop. Does anyone have any idea how to make it?. Thank you in advance.
Here is my code:
$(window).scroll(function(){
if ($(window).scrollTop() >= 700) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
});
You can use jQuery's .width() function to get the window width and build an if statement around your function like this:
$(window).scroll(function(){
//here we check the viewport width
if($(window).width() < "1024"){
//if the viewport width is less then 1024 scrolltop is 300
if ($(window).scrollTop() >= 300) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else{
if ($(window).scrollTop() >= 700) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

div positions while page scroll

I have two div left and right and on left part I set position fixed while scrolling and when scroll is about to finish I remove position and set it to bottom zero. Similar concept like flipkart does on their product detail page.
This is my code for that.
Javascript
$(window).scroll(function() {
if ($(window).scrollTop() > 10 ) {
$(".fixedSlider").addClass("DivAffix");
$(".fixedSlider").removeClass("DivBottom");
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(".fixedSlider").removeClass("DivAffix");
$(".fixedSlider").addClass("DivBottom");
}
} else {
}
});
css
.DivAffix{position: fixed;width: 480px;}
.DivBottom{position: absolute;bottom: 0}
.fixedSlider { min-height: 516px;}
It's working fine but when I increase the resolution the left part not working properly. It jerks and set to bottom.
Actually with your code after scroll > 10 it will add/remove class then after scroll higher than window which in the same time > 10 your code will add/remove then remove/add classes on each scroll ..
$(window).scroll(function() {
if ($(window).scrollTop() > 10 && $(window).scrollTop() + $(window).height() < $(document).height() - 100) {
$(".fixedSlider").addClass("DivAffix").removeClass("DivBottom");
}
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(".fixedSlider").removeClass("DivAffix").addClass("DivBottom");
}
});
Here is the demo but I changed a little bit on css to notice the action
$(window).scroll(function() {
if ($(window).scrollTop() > 10 && $(window).scrollTop() + $(window).height() < $(document).height() - 100) {
$(".fixedSlider").addClass("DivAffix").removeClass("DivBottom");
}
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(".fixedSlider").removeClass("DivAffix").addClass("DivBottom");
}
});
#content{
height : 2000px;
}
.DivAffix{position: fixed;width: 100px ; bottom : 0;}
.DivBottom{position: relative;bottom: 0}
.fixedSlider {min-height: 116px;background : red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">Content</div>
<div class="fixedSlider">fixedSlider</div>

Show/hide div on window scroll

I have a div element #btns that is hidden by default. It should be displayed on scrolling 200px from top and again hidden after 500px from top.
Here is my (non-working) code:
$(window).scroll(function() {
if ($(this).scrollTop()>200) {
$('#btns').fadeIn();
}
elseif ($(this).scrollTop()<500) {
$('#btns').fadeIn();
} else {
$('#btns').fadeOut();
}
});
You can add a class hide in button like this:
$(function() {
$(window).scroll(function() {
console.log('scrolling ', $(window).scrollTop(), $(document).height());
if($(window).scrollTop() >= 200 && $(window).scrollTop() <= ($(document).height() - 500)) {
$('#btns').removeClass('hide');
} else {
$('#btns').addClass('hide');
}
});
});
DEMO https://jsfiddle.net/1ks8at6r/5/

how to detect user is in bottom using javascript in desktop

what i need
when user scroll down the page i need to add class using js.
problem
its appending class at last of scrolling page.
i need to add class 300px above.
jsfiddle: http://jsfiddle.net/8PkQN/1/
i have tried with : (window.innerHeight + window.scrollY) == $(document).height()
code
var bottom = $(document).height() - $(window).height();
if($(window).scrollTop() + 1 >= bottom - 2200==true)
{
$(".abslouel_left12").addClass("fixed_left_btm");
}
working code
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
$(".abslouel_left12").addClass("fixed_left_btm");
}
};
$(window).scroll(function() {
$(this).scrollTop() > 75 &&
($(".abslouel_left12").addClass("fixed_left"),
$('[data-toggle="tooltip"]').tooltip()),
$(this).scrollTop() < 75 && ($(".abslouel_left12").removeClass("fixed_left"),
)
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
$(".abslouel_left12").removeClass("fixed_left");
}
case 1 when user is at top. no class to be added.
case 2 when user scroll down add class (.fixed_length).
case 3 when user scroll to bottom add class(.fixed_length_btm)
but the issue is case 3 code is working end of scrolling browser i need it should above footer of page .
This has always worked for me:
if (window.pageYOffset == $(document).height() - $(window).height()) {
// bottom of page
}
If you want to know they reach above footer you can add the footer height into the calculation.
if ($(window).scrollTop() >= $(document).height() - $(window).height() - $('footer').height()) {
// top of footer
}
Fiddle: http://jsfiddle.net/8PkQN/449/
Alert happens when you reach the top of footer. Is that what you are looking for?
$(window).scroll(function(){
if ($(document).scrollTop() + $(window).height() == $(document).height()) {
//addClass('fixed_length_btm');
} else {
//removeClass('fixed_length_btm');
};
});
$(document).scrollTop() will give you the scrolled height. You will be in the bottom of the page when the document height is equal to the scrolled height plus window height.

$(window).on('scroll', function () when scroll to 50 %, i want to load few data

i want to load few data asap browser scrollbar travelling to 50 %
for what using jquery i wrote following funcation :
$(window).on('scroll', function () {
alert("scrolling");
if ($(window).scrollTop() + $(window).innerHeight() >= $(window)[0].scrollHeight * 0.5) {
if (counter < modules.length) {
LoadData(modules[counter]);
}
counter += 1;
}
})
but it is not working, how can i fixed that?
anthor try i made it is :
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("you are at bottom");
}
});
but i dont want alert fired at bottom, just at 50%
To detect that scrolling has reached 50% of your page use:
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.5){
For the rest we should know what's inside LoadData(modules[counter]);
http://jsfiddle.net/carlodurso/a5wmLzfm/

Categories