I have a page involving 3 sections, for e.g. top, middle and bottom.
Each of the sections are of fixed height. Lets say in this case 600px;
Within the middle section, I have some content that exceeds the stated 600px height. For e.g. 1200px of content. Creating an overflow, an inner scroll bar in the middle section.
My question is:
How can I implement a jQuery solution that will provide the following scenario.
User scrolls down past the top section to the middle section, the main scroll then snaps/switches to the middle - inner content with the overflow with 1200px height. Once they have scrolled down to the end of the content, they leave the middle section and the scroll snaps/switches back to the end section.
Can you provide a solution?
Thanks in advance
UPDATED:
this is probably not exactly the way you want it to work, but it does what you need in a way: DEMO
var passed=false;
$(document).scroll(function(){
if($('body').scrollTop()>=$('#middle').offset().top && !passed){
$('body').css('overflow','hidden');
$('#container').css('overflow','auto');
$('#container').attr("tabindex",-1).focus();
$('#container').scrollTop(0);
}
else if($('body').scrollTop()<$('#middle').offset().top){
passed=false;
}
});
$('#container').scroll(function(){
if($(this).scrollTop()+$(this).height()>=$('#long').height()){
$(this).css('overflow','hidden');
$('body').css('overflow','auto');
passed=true;
}
});
Related
I have a page, consistng of several sections. All of them (except from last one) have to take the whole height of the screen, with parallax scrolling, and the last one - have dynamic height, based on its content. The content is few times taller than the screen, and has to be scrolled normally.
Here's codepen https://codepen.io/eagor/pen/MozVjo I've edited a bit to show what I need to achieve. First 3 sections behave just like I need. The only thing to add - normal scrolling for the last section.
You could go for something like
.background:nth-child(4) {
height: 100%;
overflow-y: scroll;
...
}
now you just need to redefine you transparent background.
Hello. I know there are a lot of questions about sticking a div to top or bottom when scrolling, but my problem is more specific.
The problem is that I want the div to stick to the top or the bottom, depending on how the user scrolls.
I made this jsFiddle snippet to show how the content is set up: https://jsfiddle.net/DTcHh/6155/.
The result I want is: whenever the user is scrolling, the content on the side should also scroll at the same time with the other content. If the content on the side reached the end (top or bottom), then it should stick to the top or bottom (depending on where the end of the content is reached)
For example, in the snippet I provided, I want the content on the side to scroll until the "Fixed content Last." is visible, then stick to the bottom as the user scrolls down. Now, if the user scrolls up, I want the side content to also scroll up until "Fixed content First." is visible, then stick to the top.
Html of the side contnet:
<nav >
<div id="filterAnchor"></div>
<div id="filterScroll" class="fixed_div">
Fixed content First.</br>
Fixed content.</br>
Fixed content.</br>
...
[more "Fixed content."]
...
Fixed content.</br>
Fixed content.</br>
Fixed content Last.</br>
</div>
</nav>
In the first place you need to know the scroll direction. And if I'm right you want the sticky side bar to scroll with the content but never out of sight.
I've edited the fiddle to do this.
It should need some optimization but I hope you get the idea. The tricky part is to check if the bottom is reached and I'm still not sure if this is the right way:
if ($window.height() <= $filterClass.height() + top) {
$filterClass.addClass('stick-bottom');
$filterClass.css('top', '');
}
Edit (see comments for more context):
With this updated fiddle I added support for different situations:
1. When the side content is longer than main content:
The default position is absolute. No javascript is needed for this to work properly.
2. When the side content is longer than the window height:
The position is set to fixed. When scrolling down (content moves up) the side sticks to the bottom when reached:
// top means position top of the fixed side
if(top < 0 && fixedHeight + top < windowHeight) {
$filterClass.addClass('stick-bottom');
$filterClass.css('top', '');
} else {
$filterClass.css('top', top+diff);
}
3. When the side content is shorter than the window height:
The position is set to fixed. Situation as in original answer above.
I have created a HTML page with different sections. Each section is contained within a DIV. My requirement is to make transition between each divs. For Eg, after couple of seconds, section1 blurs out and section2 blurs in and so on. Now within a particular section I want the section contents to autoscroll until the end of the section is reached, from bottom to top. I am able to create toggle between different sections but am not able to scroll the contents of each section, so that for eg, the first section autoscrolls and when the end of section is reached, it only then goes to another section and then scrolls that. Can anybody please help me with this? I have paste my code at below link,
http://pastebin.com/rE8h5NK0
Also, I have given fixed position to each section heading but when I minimize the page the heading doesnt align correctly. And if I do not have it fixed, it is not properly visible on the page.
I would suggest running JQuery scrollTop in a loop, looking for when the scrolling reaches the bottom by matching the div's height minus the container's height with the amount scrolled:
function scroll() {
if ($('#div').scrollTop() == $('#div').height() - $('#container').height()) {
scrollInterval.clearInterval();
// Transition to next section
} else {
$('#div').scrollTop($('#div').scrollTop() + 1);
}
}
var scrollInterval = setInterval(scroll,20 /* Scroll speed */);
I'm nearly 2 months old in studying HTML, JavaScript and jQuery. I've done a few things but never figured out how to implement a DIV (or anything you may suggest) to emulate a viewport which would display text, textarea, buttons, anchors etc all of which simply cannot fit or be seen within the size of the viewport. Therefore the use of the vertical scroll. No need for horizontal scrolling, though. I can format the objects not to exceed the horizontal view. I thought of using a div inside another div, but the objects inside the INNER DIV just bleed through and show up on the bottom of the site!
Is there some magical panel in jQuery created for that purpose?
TIA
Dennis
If you have a containing div such as <div id="container">, you can add the following properties to it to get it's content to scroll vertically:
div#container {
overflow-y: auto;
height: 100px;
}
This CSS will show a vertical scroll bar if the div's content exceeds it's height. The only caveat with this solution is you must set a height on the div.
Here's an example.
I'd like to set up a "backward-compatible" scrolling sidebar on one of my pages.
I have a page containing information about a species of fish which can be extraordinarily long and images to accompany it.
The images are in the right-hand pane at the moment and I'd like them to follow the user as they scroll to the bottom of the page.
I've used the following code with some success:
jQuery().ready(function($) {
var $scrollingDiv = $("#sidebar");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
But it jumps too far when scrolling down.
(original position)
(scrolled a single mousewheel click)
When you start scrolling down the page, the sidebar appears around half-way down and as such you can only see two of the images.
Once a user scrolls past X point (say 400px), I would like the sidebar to start moving with the page. However, it also needs to go back to its original position when the user reaches the top of the page once more.
Is there a fix that can be applied to this code, or a better way of approaching this?
---------------------------------------------------------------------------------
EDIT: position:fixed Problem
When I try to apply position:fixed as per Josh and David's suggestions (either bit of JS code), this happens:
Here is Firebug's read-out of the CSS styles attached to this element:
You can use a plugin for this, but it’s such a simple task that you might as well do it on your own.
Consider this simple markup:
<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>
And this would be all the javascript you need:
var el = $('#sidebar'),
pos = el.position().top;
$(window).scroll(function() {
el.toggleClass('fixed', $(this).scrollTop() >= pos);
});
Now, it will add a class to the #sidebar div as soon as the user scroll further than the sidebar is positioned, so all you need now is som CSS. I’m applying the fixed positioning to a child element to avoid layout problems:
#sidebar.fixed > div{position:fixed;}
I put up a really simple demo here: http://jsfiddle.net/QZyH3/
You should try the jQuery code found in this tutorial, which replicates Apple's shopping cart sidebar. It has a working demo and a very small code footprint.
why not use css position: fixed; property? of course if you don't mind the div being not smooth but straightly following your scrollTop. I've found it not working only in IE6-- by today, so using fixed position is a good solution I think, otherwise you just get with window.scrollTop of DOM and assign it to your element's absolute position top