I'm trying to fix a div but only when I'm scrolling down.
I have this template :
<div>
<div class="header">Title</div> // A header that will not be fixed
<div class="sticky">Navbar</div> // A div that will be fixed when scrolling down
<div class="content">...</div> // The rest of the page
</div>
So the idea is that, when opening the page I have the 3 div displayed in the same order as the code (so header then sticky then content).
And when I scroll down, the sticky is fixed while I navigate the content.
I've tried to put a listener on scroll but I don't see how I can put a {position: fixed} only when scrolled and nothing when I return to initial position.
Related
I've made a modal, and I am hiding the scroll bar on the body so the user can only scroll the modal content.
Issue is that when I set overflow-y:hidden the body scrolls to top, but I want the page position to be preserved.
<body>
Long content
</body>
scrollY is at 1000
<body style="overflow-y:hidden">
Long content
</body>
scrollY goes to 0
I've toyed with the idea of storing the current scrollY position and scrolling back there once overflow-y is revoked. But its not the effect I desired.
Does anyone else have a better solution?
Assuming this is a true modal, and that you are preventing further actions to the main content until it is actioned (closed), why not add your content to a div and place a mask over the div, which would prevent interactions until it it closed. E.g.
<body>
<div class='content'>
Long content
</div>
<div class="modal-mask">
<div class="modal">Modal content</div>
</div>
</body>
Give the modal mask absolute positioning and covering the screen, then position your modal where appropriate.
I am using this slimscroll library to display a better looking scroll bar for some divs on my page. I noticed that if I set the height of my scrollbar class to a fixed value (i.e. '500px', '80vh' etc.) then if the content does not overflow, the scrollbar will not be present and if it does, then it will appear. It works great.
However this solution doesn't work well because I need the div that encompasses the scrollbar to take up 100% of the parent div. However when I do that, the scrollbar will appear even if the content does not overflow the container.
Does anyone know a solution where I can set the height of the scrollbar to be 100% and have it behave so that it only appear when content overflows the parent container?
HTML
<div class="s12 m12 l12 row-90 m-b-0 rail-row">
<div class="card-scroll m-r-10">
<ul class="top-list">
///adds a series of divs based on data from back end
{{#each ins in selectedInstruction}}
<li>{{> Print_job printJobArgs ins true true}}</li>
{{/each}}
</ul>
</div>
</div>
JS
$('.card-scroll').slimScroll({
size: '8px',
height: '100%',
});
$(".slimScrollBar").hide()
When the page gets loaded, slimscroll encompasses the div with the class 'card-scroll' in a div and adds html to make its scrollbar appear.
I am using .load() to refresh the contents of a div every 5 seconds.
When the div updates, the whole page will scroll back up to the top. Is there any way to prevent this from happening?
<body>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<div main-title>Title</div>
<paper-button class="custom white" raised>Log Out</paper-button>
</app-toolbar>
</app-header>
<div id="loadcards"></div>
</body>
$("#loadcards").load("getGraph.php");
$(document).ready(function(){
setInterval(function(){
$("#loadcards").load("getGraph.php");
},5000);
});
Your page scrolls back to the top when you reload because your browser very briefly does not have any content for your div. This causes the content of your page to become too small to require a scrollbar, but when the content is reapplied it might grow large enough to require a scrollbar yet again.
Option 1
You could set the Y offset to the top of your page everytime before the reload is called, then scroll back to that offset whenever the page finishes reloading (or at least as far down as possible if the page is smaller than before).
You can obtain the current offset from the top of the window with the following code:
var offsetY = $(window).scrollTop();
If you want to scroll back to where you were before, you can do so by calling the following:
$('html, body').animate({
scrollTop: $(this).offset().top
}, 300);
This will gradually scroll, but you can set 300 to 0 if you want it to scroll instantly.
Depending on the efficiency with which your page loads, you'll probably still see a jump in the page contents.
Option 2
You can alternatively put your entire DIV inside a container with a fixed height, and reload the contents inside. You should set at least a min-height on the container div.
<div style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
Set SOME_VALUE to whatever comes closest to your actual page size. This should prevent the page jump as well, but will cause your page to have a minimal height even when the actual contents are smaller.
Option 3
The most advanced solution would be to use a container DIV and set the height to whatever the LoadPage height is just before you reload. This way it will only reset AFTER you reload your page.
<div id="cardscontainer" style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
With the following changes to your JS:
setInterval(function(){
$("#loadcards").load("getGraph.php");
$('#cardscontainer').height($('#loadcards').height());
},5000);
EDIT: I swapped the 2 functions inside the SetInterval callback function because it would result in weird behaviour if the LoadCards DIV would be smaller than before.
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 want a layout the was showed in the following demo
http://jsfiddle.net/EX6qV/2/
<div class='container'>
<div class='one'> One </div>
<div class='two'>Two</div>
</div>
Here the div one has position:fixed. I want to scroll the fixed div (One) if scrolling happens.
Due to the fixed position the div sticks at that position hence it overlaps with div two if scroll happens on zooming a page.
Is the any jquery methods to overcome this problem.