Swap content on scroll but keep screen fixed - javascript

I'm trying to achieve this concept, but I'm having some frustration after trying long, convoluted methods that are still causing glitches on mobile, Firefox, etc.
The concept is this:
There are two headlines on the left and right of the page. The one on the left is focused first, and its text is visible while Headline 2 is grayed out and its text is hidden.
Then, if you scroll down, switch the focus to Headline 2, show its text, and hide the text of Headline 1.
Is this just not cleanly achievable? It started out as a fun "what if" concept that I just can't let go.
Currently, I'm trying something like this to capture the scroll:
var lastScrollTimeout;
var scrollDetectionLocked = false;
var lastScrollTop = 0;
$(window).bind('scroll', function(e) {
// do nothing if still locked
if ( scrollDetectionLocked === true )
return false;
// lock it
scrollDetectionLocked = true;
// perform operations if not locked
var direction;
var st = $(this).scrollTop();
if (st > lastScrollTop)// scrolled down
direction = -1;
else // scrolled up
direction = 1;
lastScrollTop = st;
console.log('doScroll('+direction+')');
clearTimeout(lastScrollTimeout)
lastScrollTimeout = setTimeout(function(){
// unlock it after certain time
scrollDetectionLocked = false;
}, timeoutBetweenScrolls);
});
The doScroll() function just sees which Headline/text is currently loaded, and loads the next/previous one accordingly.
However, the console output is sometimes wrong, saying it should doScroll(1) (up) when it should be doScroll(-1) (down) among other things. It just isn't a clean solution in my opinion.
I believe the issue is caused because all elements are fixed on the screen, and the only scrollable item is an element called .fake-scroll. This started out as a fix for mobile phones which don't allow e.originalEvent.wheelDelta, and again, just seems messy.
I've messed with parallax scrolling, but didn't think I could use it to achieve this effect. Any help would be greatly appreciated.
Aside from the "Main | Alt" nav links not staying fixed and the "More" submenu not working, this example shows the last semi-working example I had. https://jsfiddle.net/0vju51ba

Related

One page scroll wrong offset with floating menu bar

I am having an issue. Im using a one page design for a friend with a fixed floating menu on the top. The problem I encounter is that when I click on a link it scrolls down but the offset is not right. Most the of time it scrolls down a little too much covering the content below the menu. What I am trying to achieve is that the scrolling stops at the div being exactly below my menu bar. The other issue is that somehow it wont scroll down when the space between two sections is too narrow. It tries but somehow only moves a few pixels then stops. I can imagine that both are related to the offset issue.
Im sorry, english is not my native language.
Here is what I got so far. A standard scrolling function with window.location.hash. The target are divs spread across the site.
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var t = $(this.hash).offset().top;
$('.wrapper').animate({
scrollTop: t,
}, 1000, function () {
window.location.hash = target;
});
});
});
You can see an example of the problem live: http://rolfvohs.com/
What I tried so far was using the add.class function to bind the div with an extra padding when a link is clicked. It does work in a way but creates an awkward space. I also tried placing the divs at different locations but that does not fix the job either, just messes it up further.
I would appreciate some insight.
window.location.hash = target;
moves the scroll by default to the div position and you are setting offset top before the hash change so first its changes the offset after that it move to div location.
first try after removing the line "window.location.hash = target;" from the code
or
move the "window.location.hash = target;" out side and above the "$('.wrapper').animate({})" it will work .

Infinite Scroll Effect with javascript

anyone have a clue how to make a sroll effect like this?
http://www.eurekasoft.com
I know the content is repeated at the end to create the illusion but i would like to know how to achieve the seemingly never end scroll.
Thanks!
It appears that site is using Skrollr: http://prinzhorn.github.io/skrollr/
Scroll all the way down for links to the Github and more examples.
Deep down, it is using the function window.scrollTo() to set the scroll position, and probably setting DOM around that area so that it looks the same as where it was scrolled from.
https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L617
This works for me :)
here is the example: http://www.cancerbero.mx (only enable in Chrome and Safari)
// #loop is the div ID where repetition begins
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
var limit = $('#loop').position().top;
if(scroll >= limit){
window.scrollTo(0,1); // 1 to avoid conflicts
}
if(scroll == 0){
window.scrollTo(0,limit);
}
});
});

Jquery Sticky Nav Issue

I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.
I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/
I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!

Scroll div on pagescroll but stop after certain amount

I have currently got an element to scroll on page scroll and I am looking to get it to stop after around 750px as it currently overlaps the footer on smaller monitors.
I have found a couple of other examples which would require some restructuring of my code which I am trying to avoid, as the various other examples have to have certain divs relevant to eachother in order to stop the scrolling div at a certain point on the page.
My current script is as below and wrks great, only I am unsure as to edit this to stop the div at a certain point:
<script type="text/javascript">
$(function(){
var btn = $('.overview-wrap');
var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed',top:0,marginTop:0});
}else if(btn.css('position') === 'fixed'){
btn.css({position:'',top:'',marginTop:'20px'});
}
});
});
</script>
Any pointers would be appreciated.
Personally, I hate dealing directly with the DOM for things like position, because it's so variable. Check out the jquery-position library for a nice abstraction on top of the dom.

Custom parallax

I'm trying to create my own custom parallax plugin so that I am able to choose the direction the items transition off the screen and I'm just stuck at making sure that no matter how a user scrolls and no matter of the size of the window that the object disappears at the correct point.
Currently I have:
var lastScrollTop = 0;
var logoStartPos = $('.bg-logo').position().left;
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if($('.bg-logo').is(':in-viewport'))
$('.bg-logo').css({'left':($('.bg-logo').position().left+10) + "px"});
} else {
if($('.bg-logo').is(':in-viewport') && logoStartPos < $('.bg-logo').position().left)
$('.bg-logo').css({'left':($('.bg-logo').position().left-10) + "px"});
}
lastScrollTop = st;
});
});
As you can guess this only moves the item right until it goes off screen. This way has varied results because if I use the scroll wheel it take longer to disappear to if I use the scroll bar. I also have another problem in that if I use a mixture or have a different view port I get an different result all together.
Any tips or pointers to achieve the result I'm after?
An working example of my code is at http://motoring.egl.me.uk
Thanks Matt
A bit dated, but FYI...
In your jQuery initialize or ready event, you need to initialize each section, article, item or whatever it is (item.each) to instantiate a scroll function, so that each one has it's own scroll function.
this.each(function(index) {
Then in scroll function, only handle the event, if it is the 'current' section. You will need some way to determine which item is the 'current' one. Often this is done by saving each item's window size into a global array, and then using that compare to the current location.
Something like: (The way you designed your code will likely be very different)
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) )
In this way, once one item goes off the screen, the next item should become 'current' and continue the scrolling.

Categories

Resources