Make a sticky sidebar? - javascript

I want to make my sidebar sticky on my webpage. Just click on a article like this one. On the right side you can see the sidebar. I want that the sidebar comes down if the user slides down and stops at #abspann. But if the user scrolls up again the sidebar should come up as well and stop at the original place.
I already tried this code which can be found here but it isn't working on my website... Can somebody help me please or tell me what I need to do?
Here the code:
<script>
jQuery(function(){
var sidebar = jQuery('#sidebar-wrap'),
nav = jQuery('.sidebar-content'),
startPosition = jQuery('#sidebar-wrap').offset().top,
stopPosition = jQuery('#abspann').offset().top - nav.outerHeight();
jQuery(document).scroll(function () {
//stick nav to top of page
var y = jQuery(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
});
</script>

You'll need to locate ur '$window' position by declaring
var $window = $(window).scrollTop();
Then, you can check if the $window has scrolled passed the point u want, like so:
if (height > 0) {
$('.sidebar-content').addClass('sticky');
} else {
$('.sidebar-content').removeClass('sticky');
}
Keep it simple!

found this thing, its working detection if its up or down. the rest you can just with addclass and remove class.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
alert("I am an alert box!");
} else {
alert("asfasfasfasf!");
}
lastScrollTop = st;
});
I did put alert boxes to check if it works quickly, so be aware of the spams :D

Tested this in your fiddle and seems to work a treat you just need to make a few amendments to your original code:
var $navWrap = $('#navWrap'),
$nav = $('nav'),
startPosition = $navWrap.offset().top,
stopPosition = $('#stopHere').offset().top - $nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var scrollTop = $(this).scrollTop()
if (scrollTop > startPosition) {
$nav.addClass('sticky');
if (y > stopPosition) {
$nav.css('top', stopPosition - y);
} else {
$nav.css('top', 0);
}
} else {
$nav.removeClass('sticky');
}
});

No js is required. Css only : position:fixed;
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning
https://caniuse.com/#search=fixed

Related

Show div after scrollDown then scrollUp to top

I want to show hidden div after scrollDown then scrollUp to top. This means that after I scroll down and then scroll up to top, the hidden div is show.
This is my js, but it's just scrollDown.
$(document).scroll(function() {
let y = $(this).scrollTop();
if (y > 100) {
$('.latest_news').fadeIn();
} else {
$('.latest_news').fadeOut();
}
});
I don't know how to after scrollUp, that div show for me?
Thank you.
Sorry about my English.
$(document).scroll(function() {
if ($(this).scrollTop() === 0 && $(".latest_news").is(":hidden")) {
$(".latest_news").fadeIn();
} else {
$(".latest_news").fadeOut(); // remove this else block if you do not want hidden on every scroll down
}
});
I give you solution.
This is very simple.
You need to know scroll direction.
var lastScrollTop = 0;
$(window).scroll(function(event) {
var st = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if (st > lastScrollTop) {
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
reference my blog: https://seunggabi.tistory.com/entry/JS-Browser-get-scroll-direction

Jquery mobile sticky header

I have a jquery mobile header div (data-role="header" data-position="fixed") with two toolbars inside in a layout like this:
_____________________
|XXXXXXXXXXXXXXXXXXX|
|YYYYYYYYYYYYYYYYYYY|
and I want to reproduce the effect of WhatsApp, where scroll down hides toolbar XXXXXXXX and scroll up shows toolbar XXXXXXXXXX. Toolbar YYYYYY always visible.
By using window.onscroll this can be achieved by adding/removing a class with top:-50px; upon scroll down/scroll up.
It works, however, it works only when the page is loaded for the first time or it is reached with a link having rel=external. In all other cases, it is impossible to see the effect of the added class. I have also tried .addClass("sticky").enhanceWithin() with no effect.
Any suggestion to make this to work every time?
Here the code:
var didScroll = false;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = 20;
$(document).on("scroll", function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var currentScroll = $(this).scrollTop();
if(currentScroll >= 200) {
$("#scrollToTop").show();
} else {
$("#scrollToTop").hide();
}
if(Math.abs(lastScrollTop - currentScroll) <= delta)
return;
if (currentScroll > lastScrollTop && currentScroll > navbarHeight){
$('#PageHeader').removeClass('nav-down').addClass('sticky');
} else {
if(currentScroll + $(window).height() < $(document).height()) {
$('#PageHeader').removeClass('sticky').addClass('nav-down');
}
}
lastScrollTop = currentScroll;
}
I hope my fiddle will help you out:
[http://jsfiddle.net/Lfve19u0/]
Ramon.

Add extra top .offset()

I was wondering how to add extra 'top' .offset() to this div;
mapstick
I think its something to do startPosition?? I thought I could get away with changing it in CSS but this just broke the function of the div unsticking at a certain height.
I tried in the CSS to make the top px '!important' on the div. This is what broke the if/else statement as it messed up what the actual top of the div and the script didn't realise this it looks like.
var navWrap = $('#navWrap'),
nav = $('#mapstick'),
startPosition = navWrap.offset().top,
stopPosition = $('#stopHere').offset().top - nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
I just need an extra 70px on the top of the div so it can be fully visible.
I have also looked at using this;
.offset({ top: 70 });
I think I used this wrong as this just messed things up.
Turns out I can just amend another class to a child div to have the effect that I am wanting. So I have just added an extra 'addClass' to the if statement and it seems to have done the trick.
This is the script that I have now;
var navWrap = $('#navWrap'),
nav = $('#mapstick'),
maptop = $('#map')
startPosition = navWrap.offset().top ,
stopPosition = $('#stopHere').offset().top - nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky'),
maptop.addClass('maptop');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky'),
maptop.addClass('maptop');
}
});
I have added in the 'maptop' to the if statement which is working. I don't know if this is the best way to do it but it is working and I am fine with that lol

Sticky Sidebar with JavaScript - Sticky only until specifed element

I want to create a sticky sidebar. But the sticky sidebar should only be stick until the ending of the sidebar has reached a specifed element.
Here is the webpage I want to get worked with the sidebar:
https://digital-hacks.de/vpn-verbindung-einrichten/
You can see the code in the head section or here.
<script>
var sidebar = $('#sidebar-content'),
nav = $('.sidebar-content'),
startPosition = sidebar .offset().top,
stopPosition = $('#abspann').offset().top - nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
</script>
I want that the sidebar gets attached to the screen if the user scrolls down and it should end if the ending of the sidebar has reached the element #abspann.
But I get a error in my code:
Uncaught TypeError: $ is not a function at (index):415
How can I get this working?
I found the sourcecode here.
Greetings
Cant add comment so posting as a answer. Try replacing $ with jQuery in your above code. Hopefully it will resolve the error.
I think this will work.
<script>
var nav = $('.sidebar-content'),
startPosition = nav.offset().top,
stopPosition = $('#abspann').offset().top - $(window).height();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
</script>
Style sticky class as you desire position: fixed and other tweaks you need to do. it's woking on your website. I tried using the console.
First you have to replace $ with jQuery and then try this,
var sidebar = jQuery('#sidebar-wrap'),
nav = jQuery('.sidebar-content'),
startPosition = sidebar.offset().top,
stopPosition = jQuery('#abspann').offset().top - nav.outerHeight();
jQuery(document).scroll(function () {
//stick nav to top of page
var y = jQuery(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
Also you have to add id here
<div class="wpb_wrapper" id="sidebar-wrap">
in wrapper of sidebar
and add style for sticky
.sticky {
position: fixed;
top:0;
}

jQuery Add/Remove Class when Scrolling

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");
}
});
});

Categories