Develop Reference

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.

jQuery Waypoints Plugin

How are you?
Im using waypoints plugin for sticky elements as i scroll down the page.
However I will like to have the sticky remove at a certain position of the page, lets say 30px from its starting scroll point and then when the user scrolls up back the page, the sticky elements takes it back and up back to its original starting point:
JavaScript:
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
if (direction == 'down') nav_container.css({ 'height':nav.outerHeight() });
else nav_container.css({ 'height':'auto' });
},
offset: 15
});
});
Another Example you can look at that i found online is here
http://webdesigntutsplus.s3.amazonaws.com/tuts/313_waypoints/demo/index.html
Lets just say I want the sticky nav to be dropped off at CHAPTER ONE as im scrolling down then when I'm scrolling back up it gets picked up back and carry it to the starting point.
Also: http://imakewebthings.com/jquery-waypoints/#doc-disable
I was trying to use this but no success.
Thanks
Any direction from Fiddle will help!

Calculate scroll on Html [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can you get the user’s scroll position every time they scroll with JavaScript/jQuery?
I am trying to write something in JavaScript/Jquery on the use of scroll events.
Here is where I started but I can't seem to figure out how to get scroll value.
I am looking for is the class/method to find the current scroll
position on the page.
Any help is greatly appreciated.
$(document).ready(function () {
$(window.parent.document).scroll(function () {
var scroll_info = X;//X == the method/class of getting scroll value
if (scroll_info > 40) {
//show
$('#ArrowImage').show(1000);
} else {
//hide
$('#ArrowImage').hide(1000);
}
});
});

You could likely use both JQuery's .prop and .scrollTop methods to retrieve the position of the vertical scroll bar, for the element you're trying to scroll. Here's an example that combines a little of each of those to scroll a textbox to its bottom:
$('#chatTextContainer').scrollTop(
$('#chatTextContainer').prop("scrollHeight") );
To find the currently scrolled top, you would use something like this:
$(element).prop("scrollTop")
What you seem to be looking for is:
theTop = $("html").scrollTop();

Scroll a div vertically to a desired position using jQuery

This is a followup question for this:
Scrollpane on the bottom, css is hacky, javascript is hard
I ended up doing the scrolling in the same way explained in the accepted answer.
Now there is a request that one item is selected somehow (eg. as an url parameter or by some javascript calls) I should scroll the pane to the item with the corresponding ID in the scrollpane. Like a link to an anchor () would work!
I want to make a javascript call like this
function scrollTo(id) {
$('#middle').magicallyScrollThatItemWouldBeVisible(itemid);
}
But this is not in jQuery (or at least I don't know of it). So is there a way to make it?
I'll post a simple jsFiddle here:
http://jsfiddle.net/ruisoftware/U6QdQ/4/
Help me write that scrollTo function!
A .animate would be fine too.
UPDATE: If it was not clear I would like it to only align to the left or right side of the panel, it it was overflowed on that side (so the minimum possible amount of scrolling happens)

It's not jQuery, just JavaScript, and I've actually never used it all, so I'm not sure how you would have to mess with it to get it to work in this situation, but there is a scrollIntoView function:
yourElement.scrollIntoView();

Since the elements have a fixed width, you can count the number of elements by using .index() + 1, and animate to this value (after subtracting the container's width).
If you want the element to be centered, use - Math.round(middle.width()/100)*50.
Fiddle: http://jsfiddle.net/U6QdQ/17/
//This code should be run on load / DOMReady
(function($){ //Run on load / DOMReady
$.fn.magicScrollTo = function(){
var middle = $("#middle");
var currentScrollLeft = middle.scrollLeft();
var width = middle.width();
var newScrollLeft = this.offset().left + currentScrollLeft - middle.offset().left;
if(newScrollLeft >= currentScrollLeft && newScrollLeft <= currentScrollLeft + width - this.outerWidth()) return;
if(newScrollLeft > currentScrollLeft){ //If the element is at the right side
newScrollLeft = newScrollLeft - width + this.outerWidth();
}
middle.animate({
scrollLeft: newScrollLeft,
}, 'fast')
}
})(jQuery);
Usage:
//Select the 4rd element, and scroll to it (eq is zero-based):
$('.item').eq(3).magicScrollTo();

Something along these lines would be a good start:
http://jsfiddle.net/vHjJ4/
This will bring the target into the centre of the carousel. I think you will have to add in some extra checks to make sure that it didn't scroll to far, for example if you targeted the first or last element...unless this is built into the scroll function (it might be).

I'm not sure I understand your question exactly, but it sounds like you're asking how to scroll horizontally to the selected item in the bottom pane. If so, try something like this:
//get the position of the element relative to the parent ("middle")
var pos = $("#itemid").position();
if (pos){
$("#middle").scrollLeft(pos.left);
}
From here, you can use the width of middle to center the item if needed.

How would I implement a vertical version of this horizontal dynamic header?

On The Economist website, there is a horizontal header that only appears after you scroll down the page once. See here:
http://www.economist.com/blogs/asiaview/2010/12/china_and_nobel_peace_prize
What I want is a vertical version of this that would come out of the left or right side of the page and expand over the page content that is already in place.
Anyone know of an existing plugin or how I could build something like that in jQuery?

Here's a simple jQuery plugin that should work for you:
(function($) {
$.fn.scrollToast = function(options) {
var settings = options || {};
var offset = settings.offset;
var toast = settings.toast;
var $toast = $(toast);
var hidden = true;
// prepare the toast:
$toast.css({
display: 'none',
position: 'fixed',
top: '0px',
left: '0px',
zIindex: '1',
overflow: 'hidden'
});
this.bind("scroll", function($event) {
var top = $(this).scrollTop();
if ((top >= offset && hidden) || (top < offset && !hidden)) {
hidden = !hidden;
$toast.animate(
{width: "toggle"});
}
});
};
})(jQuery);
Usage: $(window).scrollToast({toast: "#toast", offset: 50});, where #toast is a selector indicating the element to slide out, and offset is how long you want the user to scroll before the toast appears.
Notes:
Uses CSS position:fixed and an elevated z-index to make the toast element appear on top of other content.
When the target element is scrolled to a value equal to or beyond offset, the toast element is slid out (it is initially hidden).
When the target element is scrolled to a value less than offset the toast element is slid back in.
Could easily be extended to show the toast on the other edge of the screen or the top or bottom.
Will probably work on any scrollable element, but I've used $(window) because it seems to fit the use case you described.
See a working example here: http://jsfiddle.net/andrewwhitaker/56dTA/

Yes, it's pretty easy to build:
You create a:
<div id="hiddenmenu">
This Appears on scrolldown
</div>
This div should be absolute positionend, and display:none;
With the jQuery, on scroll-down you use $('#hiddenmenu').show();
That's pretty much it, if you need the full code, just ask and I'll post it.