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();
}
});
})
Related
I have explored few approaches to this, but none really seems to work exactly like I would like:
I would like that when scrolling down, navbar is moving up at the speed the user is scrolling down, like that is static at that point.
When it disappears, I would like that the bottom of it is still visible, because this is where I have a progress bar (but maybe progress bar should detach at that point and be on top of the viewport).
When you scroll up, I would like that navbar appears again, again at the speed of scrolling, like it is static, until you see the whole navbar, when it should stick to the top of the viewport.
Here is an example of behavior I would like, but not performance/experience (because behavior is implemented using scroll event, it is not smooth).
I have also attempted to use CSS transform, which would on scroll down add a class to hide the navbar, and scroll up remove the class, animating the navbar hiding/showing, but the issue with that is that animation speed is disconnected with scrolling speed.
I tried CSS sticky position as well, but it looks like I need the opposite of what it provides.
Is there some other way to make this work well?
I've looked at your problem and I think i found a simple approach.
with this simple function you can get the amount of pixels user has scrolled.
window.onscroll = function (e) {
console.log(window.scrollY); // Value of scroll Y in px
};
after user scrolls the desired amount of pixels, make the progress bar fixed top ( or position:fixed;top:0)
Checking the link you provided, it seems to work as expected (you want it to be linked to the scroll event since you want it to move as "static"). If, though, it staggers on some system due to inconsistent scroll events, you could try adding a transition property with a small enough duration. Keep in mind the this should only be enabled while the position property remains the same, otherwise when changing from "absolute" to "fixed" it would mess things up, since the coordinate origin changes.
So you can add another variable let changedPosition = false; and whenever you change the position property you can do
if (position !== "absolute") {
changedPosition = true;
} else {
changedPosition = false;
}
position = "absolute";
or
if (position !== "fixed") {
changedPosition = true;
} else {
changedPosition = false;
}
position = "fixed";
and when you apply the style do
navbar.style = `position: ${position}; top: ${navbarTop}px; transitiona: ${
changedPosition ? "none" : "100ms linear"
}`;
like https://codepen.io/gpetrioli/pen/XWVKxNG?editors=0010
You should play around a bit with the transition properties you provide, i just put some sample values there.
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.
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)
});
Basically What I am trying to do is to have a fixed header at top, when page is scrolled. please find the below code snip which i have used.
//This method is used to fixed header, while page is scrolling.
var fixedPageHeader = {
fWScrolling : function () {
var div = $('#headinfor');
var start = $(div).offset().top;
$.event.add(window, "scroll", function(){
var p = $(window).scrollTop();
if((p)>start){
$(div).css('position','fixed');
$(div).css('top', '0px');
$(div).css('left','0px');
$(div).css('margin-top','-2px');
$(div).css('z-index','500');
}else{
$(div).css('position','static');
$(div).css('top','');
$(div).css('margin-top','0px');
$(div).css('z-index','0');
}
});
}
}
at the time header get fixed at top of the page, scroll bar is jumped to right back to start. i wont be able to scroll down the page.
Reason for this issue is, when header gets fixed at top of the browser, its z-index will be assigned a value. So there will be space created between content and browser's top bar which is x (please check the image i have attached).Thereforr scroll bar suddenly jumps up.
https://drive.google.com/file/d/0B1dp9jlk2GZMYU9iM3lST2xzSkk/view?usp=sharing
In order to get ride of that, need to create div with same hight as the header. when it gets fixed at top of the browser when scrolling down and hide it when scrollig up.
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");
}
});