How do you create a html scrollable area, that just uses the main browser scrollbar

Tags: javascript,html,css,scroll

Problem :

I was looking at an issue in JIRA (e.g. here, an issue in JIRA 4) and I noticed JIRA 4 has some interesting scrolling behaviour, where when scrolling down with the main browser scrollbar,the jira header scrolls up out of way, then the issue title stays fixed at top, then the rest of the issue continues to scroll. So the issue title is always visible.

There isn't an extra vertical scrollbar. Its all scrolled via the main browser scrollbar. So its either css or javascript magic! Any idea how they do that?



Solution :

It changes dynamically the div #stalker which has position:absolute;top:76px;. When the user scroll, change the position to position:fixed;top:0 and keep it in a fixed place, giving you the ability to scroll the rest content.


I created an example of this behavoir, because I was curious and here the demo if you want to check it

    CSS Howto..

    How do I get a jquery function to only affect the child element of 'this'

    How to make corners of progress bar round in css

    How to get GWT console/development mode to generate css errors?

    how to use static folder in django for css and javascript?

    CSS Flexbox : How to construct a specific layout

    How did skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How to create a css rule for all elements except one class?

    How do you create boxes like github's explore section?

    How to pin sidebar to the top of page but within its parent element using HTML/CSS only

    How to make video responsive for all the screen sizes?

    How to apply css, after Jquery adds a class?

    How to achieve “paper-like” background effect? [closed]

    How to have a table scroll only within a custom control on page? CSS help needed

    How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

    How do you vertically align the body tag of an HTML document?

    how to remove all spaces from a file

    How to refer to third level lists in css?

    Need help determining how to position this element with CSS

    How to make the divs fill the remaining space without using float?

    How to create live event for css

    How to make CSS fade out but the HTML to collapse

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    How to show only half of bootstrap glyphicon with css

    (html/css) How do I remove the margin appearing from my header, and have it only apply to my Logo?

    How to break a overflowed navigation bar via CSS

    how to know when css3 animation ends

    How can I get .less compiler support in Visual Studio 2012 Release 2?

    How to make below style:

    How to get same height to two sibling buttons

    How to select an UNTAG element in CSS