How to find the vertical scroll bar end position? - javascript

I want to add div at bottom of the page. For that, I want to find the vertical scroll bar position. I want to add div element at scroll bar end..How can I add div in scroll bar end?
The div element is:
<div class = "mydiv">
<div class = "normal">
<h3>Thank You</h3>
</div>
</div>
I want to display the div at bottom of page if not having scroll bar also. The div want to displays all time in the page. If having scroll bar means, the div element position is the scroll bar end. If not having scroll bar means, the div element want to display at bottom of page.

Try this:
$(window).scroll(function(){
if($(window).scrollTop() === ($(document).height() - $(window).height())) {
$(".mydiv").append("<div>This is a new div.</div>");
}
})

Below code is working fine with one of the requirement for the project, Hope this will solve your problem.
i assume mydiv scroll bar is reach bottom of the page.
jQuery(document).ready(function($) {
$('.mydiv').scroll(function() {
if ($(this).scrollTop() + $(this).innerHeight() >=$(this)[0].scrollHeight) {
// do add your code
$(".mydiv").append("<div>Your New div</div>");
}
});
});
You can look at one of my working code in sales-force using this functionality
PaginationOnScroll

How to find the vertical scroll bar end position?
isReachToBottom(){
if($(window).scrollTop() === ($(document).height() - $(window).height())) {
return true;
}
return false;
}
How can I add div in scroll bar end?
$("yourtag").append("your footer");

here is the code to find scrollbar position
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
console.log(scroll)
});

Related

How to make the horizontal scroll bar permanently visible?

I wrote this piece of code in order to display an horizontal scroll bar along a container of elements. The issue is that the bar is evident only when I put the cursor above the element. If the cursor is not put on the container with the elements, the bar is not evident, therefore the user may not be aware he has to scroll. Any idea about how to modify it in order to make the bar permanently visible?
$(window).scroll(function () {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function () {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
You can use overflow-x: scroll; for that element in a CSS rule to permanently display a horizontal scrollbar.

Sticky Nav JS only works if page loaded at top of screen

I'm using a bit of code that adds the class sticky to my nav bar when you scroll down. However if the page is refreshed while scrolled lower down, or if I link to an anchor lower on the page, the class doesn't add till I scroll further down. It also doesn't add while scrolling up. How would I modify the code to add the class if the widow isn't scrolled to the absolute top?
var stickyTop = $('.primary-menu-container').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.primary-menu-container').addClass('sticky');
} else {
$('.primary-menu-container').removeClass('sticky');
}
});
https://jsfiddle.net/0qccqzox/

Hide element when scroll bar is not at the top

I have a big navigation bar that I want to hide everytime the scroll bar is not at the top position.
So basically, I have the idea of having two navigation bar, overlapping each other.
One with the larger height is on top (having a larger z-index) and the smaller one with the same navigation but with a small width is below it.
I want something that when the user scrolls his mouse wheel down/ drags the scroll bar, use a keyboard to scroll down even a little, the big navigation bar will disappear (more like hide), leaving the smaller one on top.
I did a trick that the one with higher height is scrollable (not fixed) and the one below is fixed.
But I find it awkward. So instead, I want to hide it when the user scrolls down and show it again when the scroll bar is at the top.
Basically, it's like a windows taskbar in autohide mode. But it will hide when the user scrolls down and show when the scroll bar is on top :))
You can use some simple JS to do this:
window.onscroll = function() {
var top = document.body.scrollTop + document.documentElement.scrollTop == 0;
document.getElementById('topbar').style.display = top ? 'block' : 'none';
document.getElementById('scollbar').style.display = top ? 'none' : 'block';
};
Substitute IDs as relevant to your code.
Here is a simple jQuery function that will show or hide a element <ElementID> in this case dependant on the scrollTop position.
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() == 0) {
$('#<ElementID>').show();
} else {
$('#<ElementID>').hide();
}
});
})

Fixing an element when it reaches the top of the page

I currently have a script that fixes a <header> element after a certain amount of scrolling. How would I modify it so that the element scrolls normally until it gets to the top of the page then fixes. Something like this.
Current code:
$(document).ready(function(){
// Fix Sidebar
windowHeight = $(window).height();
sidebarHeight = $(".sidebar").height() + 70;
console.log(sidebarHeight + ", " + windowHeight);
if (windowHeight > sidebarHeight) {
$('.sidebar').addClass("affix");
}
});
N.B. .affix is just {position:fixed}.
Site
The <header> element is the sidebar on the right with the big green demo button.
To make your sidebar fixed when the user scrolls down and reaches the top of the sidebar, use Jquery to add a class name to the sidebar when it reaches the window top position and add the position:fixed style to this new class.
var stickySidebar = $('.sidebar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickySidebar) {
$('.sidebar').addClass('affix');
}
else {
$('.sidebar').removeClass('affix');
}
});
This will add a class name affix to the sidebar when the user scrolls down and reaches the top of the sidebar. Now add the fixed position to the sidebar with class name affix.
.sidebar.affix{
position:fixed;
top:0;
right:0;
}
DEMO
I believe you may be looking for something like this: http://stickyjs.com/ (scroll to see it in action, you can do this to any element on a page). If that isn't what you are looking for let me know and I will help come up with something that suits your needs.

Fade out a div when scroller hits bottom of another div

This question sort of relates to this one: Append div to body when URL hash # changes
I'm using Curtain.js and currently I have a fixed div that pops up when the hash changes. I.E the div fades in when the user scrolls down the page to different panels. I don't want this div to be visible on the first panel.
The problem I now have is that when the visitor scrolls back up the page to the top the fixed div is still visible. I.e. appearing on top of the first panel. I would like to fade that div out as soon as it hits the bottom of that first panel. The other issue is that the panel's height adjusts to the height of the browser window (fluid/responsive layout) ruling out any fixed pixel JS solutions, which is what my code is based on:
// fade in/fade out banner titles
$(window).trigger('scroll');
var divs = $('.nav-wrap');
$(window).scroll(function(){
if($(window).scrollTop() < 550){
divs.fadeOut("slow");
} else {
divs.fadeIn("slow");
}
});
Anyone have any suggestions??
you can use window.height() which returns the height of the browser's viewport:
var vp = $(window).height(); // height of the browser's viewport
var divs = $('.nav-wrap');
$(window).scroll(function(){
if($(window).scrollTop() < vp){
divs.fadeOut("slow");
} else {
divs.fadeIn("slow");
}
});

Categories

Resources