div positions while page scroll - javascript

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>

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>

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/

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

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.

jquery: $(window).scrollTop() but no $(window).scrollBottom()

I want to place an element to the bottom of the page whenever the user scrolls the page. It's like "fixed position" but I can't use "position: fixed" css as many of my clients' browser can't support that.
I noticed jquery can get current viewport's top position, but how can I get the bottom of the scroll viewport?
So I am asking how to know: $(window).scrollBottom()
var scrollBottom = $(window).scrollTop() + $(window).height();
I would say that a scrollBottom as a direct opposite of scrollTop should be:
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
Here is a small ugly test that works for me:
// SCROLLTESTER START //
var showerEl = $('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>')
showerEl.insertAfter('body');
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollBottom = $(document).height() - $(window).height() - scrollTop;
showerEl.html('scrollTop: ' + scrollTop + '<br>scrollBottom: ' + scrollBottom);
});
// SCROLLTESTER END //
For the future, I've made scrollBottom into a jquery plugin, usable in the same way that scrollTop is (i.e. you can set a number and it will scroll that amount from the bottom of the page and return the number of pixels from the bottom of the page, or, return the number of pixels from the bottom of the page if no number is provided)
$.fn.scrollBottom = function(scroll){
if(typeof scroll === 'number'){
window.scrollTo(0,$(document).height() - $(window).height() - scroll);
return $(document).height() - $(window).height() - scroll;
} else {
return $(document).height() - $(window).height() - $(window).scrollTop();
}
}
//Basic Usage
$(window).scrollBottom(500);
var scrollBottom =
$(document).height() - $(window).height() - $(window).scrollTop();
I think it is better to get bottom scroll.
This will scroll to the very top:
$(window).animate({scrollTop: 0});
This will scroll to the very bottom:
$(window).animate({scrollTop: $(document).height() + $(window).height()});
.. change window to your desired container id or class if necessary (in quotes).
try:
$(window).scrollTop( $('body').height() );
Here is the best option scroll to bottom for table grid, it will be scroll to the last row of the table grid :
$('.add-row-btn').click(function () {
var tempheight = $('#PtsGrid > table').height();
$('#PtsGrid').animate({
scrollTop: tempheight
//scrollTop: $(".scroll-bottom").offset().top
}, 'slow');
});
// Back to bottom button
$(window).scroll(function () {
var scrollBottom = $(this).scrollTop() + $(this).height();
var scrollTop = $(this).scrollTop();
var pageHeight = $('html, body').height();//Fixed
if ($(this).scrollTop() > pageHeight - 700) {
$('.back-to-bottom').fadeOut('slow');
} else {
if ($(this).scrollTop() < 100) {
$('.back-to-bottom').fadeOut('slow');
}
else {
$('.back-to-bottom').fadeIn('slow');
}
}
});
$('.back-to-bottom').click(function () {
var pageHeight = $('html, body').height();//Fixed
$('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
return false;
});
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
For an item in my page :
document.getElementById(elementId).scroll(0,
document.getElementById(elementId).scrollHeight);
function scrollBottum(elementId){
document.getElementById(elementId).scroll(0, document.getElementById(elementId).scrollHeight);
}
<html><div><button onclick="scrollBottum('myCart')">Click me to scroll</button></div>
<div id="myCart" style="height: 50px; overflow-y: scroll;">
<div>1: A First ...</div>
<div>2: B</div>
<div>3: C</div>
<div>4: D</div>
<div>5: E</div>
<div>6: F</div>
<div>7: LAST !!</div>
</div>
</html>
i try that and it work very well
scrollrev(){
let x:any= document.getElementById('chat')
x.scrollTop = -9000;
}
i try that code and it work
// scroll top
scroll(){
let x:any= document.getElementById('chat')
x.scrollTop = 9000;
}
// scroll buttom
scrollrev(){
let x:any= document.getElementById('chat')
x.scrollTop = -9000;
}
This is a quick hack: just assign the scroll value to a very large number. This will ensure that the page is scrolled to the bottom.
Using plain javascript:
document.body.scrollTop = 100000;

Categories