Develop Reference

Issue to fire scroll events with Smooth Scrollbar plugin

I'm using the plugin Smooth Scrollbar (here).
I have an animation on my fixed header (outside the smooth scrollbar container) and triggered when user starts scrolling the smooth scrollbar container. As mentioned in the documentation (here), it's not possible that scrollbars fire scroll events. So we have to use:
scrollbar.addListener((status) => {
...
});
This is the code to animate my fixed header:
$(window).scroll(function() {
if ($(this).scrollTop() > 50){
$('.site_header').removeClass('is--large').addClass('is--small');
}
else{
$('.site_header').removeClass('is--small').addClass('is--large');
}
});
I can't figure it out how to integrate it with Smooth Scrollbar plugin. I tried various solutions to use addListener but I can't make it work.
Any help would be much appreciated!

I know it's been a while but:
const scroller = document.querySelector('.scrollable');
const bodyScrollBar = Scrollbar.init(scroller, { damping: 0.1, delegateTo: window, alwaysShowTracks: false });
bodyScrollBar.addListener( () => {
if (bodyScrollBar.scrollTop > 50){
$('.site_header').removeClass('is--large').addClass('is--small');
}
else{
$('.site_header').removeClass('is--small').addClass('is--large');
}
}
)
where .scroller is my scrolling container. Whenever you call the variable bodyScroller in the console you can see all options set and what value you can retrieve at any time. In this instance, by calling .scrollTop (NOT a function) you can retrieve its offset top value at any time.

scroll down only work one time in javascript

Here is the javascript code for scrolling down the page :
function down() {
var scrolled=0;
scrolled=scrolled+1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
It works fine but it only works one time. If I click again it won't work. How can I find the way so this work as long as I click?
Any help will be appreciated.

You're using a constant (1000) for where to scroll to the page. Once you hit 1000 pixels from the top, telling it to scroll there again will do nothing.
Are you trying to scroll 1000 px from wherever you're at? To do that, you need to use the scroll distance:
var scrolled = window.pageYOffset;
since you're using jQuery you can also use
$(window).scrollTop();

You’re always scrolling to the same position (1000). Whenever you call down(), you set scrolled to 0.
You’ll need to define the scrolled variable outside the function scope.
Example:
(function () {
var scrolled = 0;
function down() {
scrolled=scrolled+1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
$('#scroll').click(down);
}());
(Assuming your button or link element that should trigger the scroll has the ID scroll)

If you wаnt scroll +1000px whenever you call down, try this:
var down = (function() {
var scrolled=0;
return function() {
scrolled += 1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
})();

Change scrollTop offset

I am using bootstrap 3 and have a fullscreen hero unit at the top of my page, below that is my navigation. I have some js which allows my navbar to stick to be fixed at the top after you scroll past the full screen hero. Also some js for my smooth scrolling links.
The problem is the offset is different before you scroll past the full screen hero and after. But it works fine when you are past the jumbotron. I have tried a bunch of different things but I can seem to get this to work exactly.
Check out the fiddle here.
Here is my js for the smooth scrolling links:
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 1200);
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 95;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
By changing var offSet = 95; I am able to adjust the offset but what would be the best way to use 180 before the navbar sticks to the top but 95 when it does?
Also here is the js I am using for my navbar:
$(function () {
/* $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
$(window).resize(function (e) {
$(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
});*/
$(document).on( 'scroll', function(){
console.log('scroll top : ' + $(window).scrollTop());
if($(window).scrollTop()>=$(".jumbotron").height())
{
$(".navbar").addClass("navbar-fixed-top");
}
if($(window).scrollTop()<$(".jumbotron").height())
{
$(".navbar").removeClass("navbar-fixed-top");
}
});
});

Are you open to angular.js? I have a directive i use for this. As seen here.
I'll grab the plunker link for you. you might find the code helpful.
Essentially you need to create a ghost dom element to take the place of the menu when you pull it to an new layout position.
EDIT: Here it is
I won't suggest grabbing angular just for this. But you can use the basis of the events and logic to build your own solution.
This here is creating an element and placing in its place
$scope.spacer = $element.after(
'<div class="spacer" style="height:' + $element[0].clientHeight + 'px"> </div>').next();
then this element is removed when the menu is back to its static position.
Inspect the dom and watch how it changes, this will probably help you see the events and changes that need to take place.
EDIT 2 SOLUTION:
HERE is the concepts applied to your JSFiddle

It's not the best solution but by adding margin: 0 0 -100px 0; to your .navbaryou lose the spacing issue.
Also you're getting 22 console errors because of missing images. I'm not saying that this is causing any major problems but you would be better off losing them.

The problem is that when you have not scrolled past the hero, navigation is still part of the layout and pushes content bellow it a little lower. When you scroll past (either manually or via a script) the hero, navigation is removed and fix positioned. That makes everything which was bellow to "jump up" exactly of the navigation height.
That means if portfolio was 1000px from the top, on click you say: go 1000px from top; but then porfolio moves 100px up (as explained above) meaning it is now 900px from the top while the window scrolled 1000px as you asked.
When you have scrolled past the hero, nothing changes its position.

css scrollLeft animate moves body vertically

Hi I am trying to write a function that horizontally scrolls a div to a specific point given a parameter. Everything functions properly except when the document/body is scrolled down and the function is executed by pressing a letter. When this happens the whole document/body is scrolled up to the top. I really can't figure out what I am doing wrong here but I don't want the page to scroll to the top.
an example of the code can be found at http://www.hokosounds.com/testRedesign/store-test.html#
Thanks for the help!

$(document).ready(function(){
$('a').click(function(e, _letter){
e.preventDefault();
var _letter = $(this).html();
scrollToLetter(_letter);
});
scrollToLetter = function(_letter) {
var _distance = $('#'+_letter+'Start').position().left+$('#store-nav-artist-names').scrollLeft();
$('#store-nav-artist-names').animate({
scrollLeft: _distance
}, 800);
};
});

The page will scroll to the top if you don't handle the click event to either return false or event.preventDefault http://api.jquery.com/event.preventDefault/
It will stop the behavior of a link being clicked.

Is there any way to control scroll bar using JavaScript?

In my below code a function to scroll DIV for every set of intervals where when I try to scroll up due to interval refresh scroll bar again coming down.
My code:
var int = self.setInterval("f2()", 1000);
function f2() {
var objDiv = document.getElementById("messages2");
objDiv.scrollTop = objDiv.scrollHeight;
}
Now, by using onscroll property for DIV is there anyway to stop scrolling down when holding scroll bar with mouse?
Something like
var int = self.setInterval("f2()", 1000);
function f2() {
var objDiv = document.getElementById("messages2");
// if(objDiv.onscroll) i.e. when the particular DIV's scroll bar is on hold by cursor.
{
return false;
}
else
{
objDiv.scrollTop = objDiv.scrollHeight;
}
}
If the above kind of function can be implemented anybody please correct its syntax. I am a newbie to JavaScript.
Thanks in advance..!

I’m not sure what you are asking here, but window has a scroll event that you can listen to, and so does any other element that has overflow: auto|scroll set using CSS.
You can’t prevent the default scrolling behavior, but you can use the scrollTo() method or the scrollTop property if you want to do something annoying like:
window.onscroll = function() {
window.scrollTo(0,0);
};
Here is a nice compat table of the scroll event: http://www.quirksmode.org/dom/events/scroll.html
scrollTo() docs: https://developer.mozilla.org/en/Window.scrollTo