I am using fullpage.js
https://github.com/alvarotrigo/fullPage.js/
on a frontpage of a website and it´s working fine so far.
I have 4 Sections.
The first section has more content than the height of the browser window, so there is the need to scroll inside that section.
I have added the scrollbar and it works with the scrollbar and by using the mousewheel.
Now my problem.
I have a sticky header which I want to reduce in height as soon as there is any scrolling down inside this section (and increase in height as soon as I scroll back up to the top).
So I would like to add the css class "sticky" to the "header" when using the scrollbar of the fullpage.js or the mousewheel so that I can format the header with the class "sticky" differently with css.
Unfortunately the "scroll-Events" doesn´t work here, as already mentioned here:
FullPage.JS Scrolling
I tried the following
$(function(){
window.addEventListener("wheel", function() {
$(document).ready(function(){
var scrollclass = $('.slimScrollBar').position();
if(scrollclass.top > 0){
$('header').addClass('sticky');
}
else{
$('header').removeClass('sticky');
}
});
});})
This kind of works, however the sticky class is not added by the first use of the mousewheel (it´s added by the "second turn of the mousewheel") and is not beeing removed when scrolling back to the top, I need to turn the wheel an additional time after scrolling back to the top to have the sticky class removed again.
If I change the if-statement to >= 0 it works on the first turn of the mousewheel but then I don´t get the class removed when scrolling back to the top.
The second issue is, that this only works by using the mousewheel of course, and not by dragging the scrollbar created by fullpage.js
Any ideas or hints how to solve this?
Thanks
John
you could use the "afterLoad" method, as noted in fullPage.JS's documentation:
https://github.com/alvarotrigo/fullPage.js#afterload-anchorlink-index
Related
I've been trying to use locomotive-scroll to add the smooth scrolling feature to my website. I got it up and running well, however while scrolling, I notice that the browser's default scrollbar stays at the same place as the scrollbar from the locomotive-scroll. I tried to do everything to hide it but no success. Can anyone instruct me on this issue. Thank you. Here is the image of the scrollbar (the pink part is the locomotive's scrollbar).
You can create a hide scrollbar function and add it to the pages you are using locomotive scroll.
Example:
function HideBrowserScrollbar() {
let scrollHide = document.createElement("style");
scrollHide.innerHTML = `body::-webkit-scrollbar {display: none;}`;
document.head.appendChild(scrollHide);
}
I m using the scrollIntoView function to go from one section to another on my webpage.
I would using some function to adjust the scroll. Currently the scroll make the section appear at top of page but my fixed top menu then hide a part of the section.
To make the section fully displayed on the page after the scrollIntoView I have tried to use the function window.scrollBy to make the scrollY backs on top of 150px, hence revealing the previously hidden part of the element.
But it fails.
Here my snippet:
scrollToElement = (target)=> {
target.scrollIntoView({behavior: 'smooth'})
// window.scrollBy(0,-150)
}
How adjust my scrollIntoView please?
Any hint would be great,
thanks
So I have a site that is contained in a wrapper that has a max width. This site also has a fixed side menu that is toggled with a button.
My issue is having the fixed side menu to stay inside the page wrapper as fixed elements are relative to the window not the parent element.
Here is an example using position: fixed: https://jsfiddle.net/okavp4p1/
As you can see the menu is coming out from the side of the viewport, not the wrapper (grey area).
I have found away around this using position: absolute: https://jsfiddle.net/5q3hn1fq/
Here you can see the menu is coming out of the wrapper. (correct)
But I had to write some extra jQuery to spoof fixed positioning on scroll.
// Fix menu
$(window).on('load scroll resize', function() {
navigation.find('ul').css('top', $(window).scrollTop());
});
But doing it this way causes glitches/lag on most web browsers. Though the example isn't to bad when scrolling but when implementing this on an actual site with tons more elements/code it becomes very obvious.
Here is what it looks like in use when scrolling down the page:
I have thought of disabling scrolling when the menu is open but I was just wondering if anyone can help?
there is a work-around for this. you need to create a bar at the top with position:fixed. This bar should have height: 1px and no background-color so you can't see it.
then you can add your navigation inside of there, and float:right. when you float right, it will show up, but will be pinned to the invisible fixed bar at the top. also, you have to give the nav a width of 0 so its invisible. then you can transition its width to 100px or whatever you want on button click.
finally, use jQuery to set its height to the height of the window on resizing of the window, and when you show it.
here's the fiddle: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/
since the bar is inside a position:relative bar, it shouldn't jump around as much (or at all)
do NOT add right or left padding to the navigation though, this will break the effect. instead, you can put a container around the nav, and make the nav width: 90% or something so it appears to have some padding.
here's an updated fiddle with how the padding should be: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/
If performance accross all browsers is the issue, you could re-write your function using plain .js instead of jquery.
I couldn't replicate the jittery movement in chrome, but the below should be put less strain on the browser.
$(window).on('load scroll resize', function() {
document.getElementById('nav-list').style.top = window.scrollY + 'px';
});
https://jsfiddle.net/hb4zsL6g/
I'm attempting to use Bootstraps Affix function in a sticky subnav.
<div class="container" data-spy="affix" data-offset-top="417" id="subnav">
I've dialed the offset so that there's no "skip" or "jump" when the subnav snaps into place. The problem I'm having is that the content below the subnav is jumping up the page, under the nav/subnav, because the subnav is changing from relative to fixed and it loses it's computed height.
Is there a way to counteract this? My initial though its to add/remove a class to the next div that adds in the correct padding or margin.
Here's a jsfiddle to help illustrate the problem. Pay attention to the H2 as you scroll.
I've taken a look at this.
When the 2nd scrolling nav-bar is .affixed, it takes on a position:fixed, and the subsequent div readjusts up into the space where it was, causing the flicker.
I tried listening to affixed.bs.affix without luck, but that's the route I'd check out. See http://getbootstrap.com/javascript/#affix-events.
It should generally be something like:
$("#subnav").on("affixed.bs.affix", function() {
// Adjust the next div here. Add a top margin
});
Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.
Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.
The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo
You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.
Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.