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>
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/
I'm trying to create the following functionality with conditionals...
User scrolls down (120px for example) from the top of the screen, the HTML class 'state-nav-is-hidden' is added to the HTML tag.
When he gets to the BOTTOM after scrolling the class 'state-nav-is-visible' replaces the the HTML class above.
In addition, if the user scrolls and stops before the bottom, then scrolls back up 30px toward the top, 'state-nav-is-visible' replaces the hidden tag.
The following below ONLY accomplishes 1. Any ideas? Thanks!
<script type="text/javascript">
$(function() {
//caches a jQuery object containing the header element
var header = $("html");
$(window).scroll(function(event){
var lastScrollTop = 120;
var st = $(this).scrollTop();
if (st > lastScrollTop){
header.removeClass("state-nav-is-visible").addClass('state-nav-is-hidden');
} else {
header.removeClass('state-nav-is-hidden').addClass("state-nav-is-visible");
}
});
});
</script>
st > lastScrollTop
is the right condition for 1.
st + $(window).height() === document.height
is the consition for 2.
I did not really get point 3, but you have to measure it. Open Chrome and a console as a separate window and type out the current status, like this:
$(window).scroll(function(event){
console.log("Top: " + $(this).scrollTop() + ", Bottom: " + ($(this).scrollTop() + $(window).height()));
});
and then watch the output as you scroll.
EDIT:
Taken into account the comments to the answer I have decided to take a closer look at the fiddle. I understand Mike States, as he wants to solve point 3, but unfortunately it is still unclear for me, but given the fact that he asks so nicely and so consistently for a solution to that problem, I have made a guess. Please, let me know if there is anything wrong with my guess. Everything was written based on your fiddle.
HTML:
<div class="wrapper">
<div class="inner"></div>
</div>
CSS:
div.wrapper {
height:2000px
}
.state-nav-is-visible{
background-color:red;
}
.state-nav-is-hidden{
background-color:green;
}
JS:
$(function() {
//caches a jQuery object containing the header element
var header = $("html");
var reachedBottom = false;
$(window).scroll(function(Event){
var lastScroll = 120;
var st = $(this).scrollTop();
//var bs = $(window).scrollTop() + window.innerHeight == $(document).height();
if (st < lastScroll){
header.removeClass('state-nav-is-hidden').addClass('state-nav-is-visible');
}
else if (st + $(window).height() === document.height) {
header.removeClass('state-nav-is-hidden');
reachedBottom = true;
} else if ((reachedBottom) && (st + $(window).height() <= document.height - 30)) {
reachedBottom = false;
console.log((st + $(window).height() - (document.height - 30)));
}
/*
else if (How do I get current position and if scrolled UP 30 PIXELS do something) {
alert('test');
}
*/
else {
header.addClass("state-nav-is-hidden");
}
});
});
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.
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;