Home › Forums › JavaScript › How to make a sidebar follow scroll, but scrolls self, if it’s taller than viewport?
- This topic is empty.
-
AuthorPosts
-
September 14, 2012 at 2:31 am #39835iamacatpersonParticipant
I guess the best way is to show an example. Like in the case of Lyst Website:
If the sidebar is taller than viewport, you can temporarily scroll within the sidebar up until the bottom or top has been reached, in which case, it will become fixed again.
(I have done a script that sort of detects if the bottom of the sidebar has been reached (in which case it will become fixed) but I mess up when I already need to scroll back up. So I think I might be doing it wrong all along.)
Any help to achieve this would be greatly appreciated.
September 15, 2012 at 5:15 am #110093Taufik NurrohmanParticipantSeptember 17, 2012 at 9:57 pm #110240iamacatpersonParticipantThanks but I tried this one and it doesn’t scroll itself if taller than viewport like in the website example I posted.
September 18, 2012 at 1:41 pm #110283Taufik NurrohmanParticipantLike this: http://jsfiddle.net/tovic/43eG7/12/
(function() {
$(window).on("resize", function() {
$('aside').css('height', $(this).height()).stickyBar({
until: 'footer'
});
}).trigger("resize");
})();November 8, 2012 at 9:27 am #113655Taufik NurrohmanParticipantEDIT:
So…
I have updated my plugin to solve some problems. For your case, the sidebar should have two layers of wrapper. One is used to handle the grid layout, and the inner wrapper is used to be a sticky element. This is important considering that this plugin will automatically add a.space-holder
element right before the sticky element to fill the empty space when the sticky element changes its position from the initial position to be a fixed position, which usually affects the position of another element:<aside>
<div class="inner">
...
</div>
</aside>Then, the JavaScript:
$(function () {
$('aside .inner').stickyBar({
until: "footer"
});
});January 31, 2013 at 7:43 am #85773MullMemberto Hompimpa; Saya telah mencari tutor seperti ini sejak 3 bulan yang lalu, namun setelah menemukannya saya malah jadi bingung, dimana saya harus meletakkan kode-kode tersebut.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.