We Keep Coding

When my whole page has 'position: absolute', how do I check if I am at the top or not?

I have a main menu at the top of the website which when the user scrolls, changes and becomes more compact.
I was achieving that by checking scrolling events and whether we're at the top or not.
This is the code that was working:
/*Defines how the 'main menu' will be displayed when we scroll down (if) and how it will fallback to original look when we're up again (else)*/
$(document).ready(function(){
if ($(window).width() > 480){ //not on mobile, then:
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 0) {
$('.visible-bar-container').css("position", "fixed");
$("#white-logo").css("display", "none");
//...etc
} else {
$('.visible-bar-container').css("position", "absolute");
$("#spread-out-menu").css("display", "flex");
//...etc
}
});
}
});
Mid project, the client decides that he wants the sections of the homepage to have a 'smooth scroll'. Long story short, I managed to do that after giving the whole homepage a CSS of position: absolute.
In case it matters, here is the whole CSS added to my homepage (which falls inside an element with id='main'):
#main {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
The problem is that now, the js code no longer works. (I believe that when the whole page has position absolute, checking for scrolling events no longer works-?). How then, can I check if the user has scrolled?
I might try checking whether user has moved past first section (through seeing if the div is visible in the viewport), but I would prefer the menu to become compact once we started moving down, not after the whole section has been moved past. So is there a way to check scrolling in this case?

I am the OP - so the answer was provided by Sim1-81 in the comments above. The trick was to change the third and fourth lines in the javascript:
...
$("#main").bind('scroll', function () {
if ($("#main").scrollTop() > 0) {
...
Where #main in my case is the id of the of page which I set to be 'position: absolute'.

Sticky Navbar offset to prevent overlap of content

Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.

Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.

I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }

strange results differing between left and right positioning

This is a strange bug i'm facing, i don't really understand the problem so forgive me for the obscure title.
The problem is I'm developing a SPA style site and i want the content to slide in from the right (when the buttons at the bottom are clicked)
I thought this would be easy, but for some reason it is easy to achieve from the left, using the example below
.page {
right: 100%;}
.page.active {
right: 0; }
https://jsfiddle.net/pphfstos/3/
and less ideally to slide the full width across like this
.page {
left: -100%;}
.page.active {
left: 0; }
https://jsfiddle.net/pphfstos/4/
But when i try to create the same effect as the first example but from the right it not only doesn't work but totally seems to destroy the page
.page {
right: -100%;}
.page.active {
right: 0; }
https://jsfiddle.net/pphfstos/5/
There is other code involved as you can see in the fiddle, but these are the only things that are different between the 3 examples
Can anyone explain what is happening and how to fix it?

Content you position outside of the viewport to the left is actually hidden, and can’t be reached via scrolling.
Content you position outside of the viewport to the right however “extends” the page in that direction, and can be scrolled to.
Remove the overflow-x: hidden from html/body in your first and third fiddle, and you see what I mean – in the first one, the content positioned to the left is hidden, and no scrollbar appears; in your third fiddle however you do get a scrollbar, and the content positioned to the right can be reached via scrolling, moving the part of your page that is initially visible to the left while you’re doing so.
Now, setting overflow-x: hidden removes the ability to scroll using the mouse; but the viewport can still be “shifted” to display that content, for example by navigating to an anchor – and that is what your links are doing. (But because this is an “instant jump” and not smooth scrolling, you don’t see your initially visible content move away, it is just gone instantly.)
So you simply need to suppress the default action of your anchor links in your click event handler:
mainNavButton.click(function (e) {
e.preventDefault(); // prevent event default action
// … rest of your code
– and the effect of the page ”jumping” to the anchor position is gone.
https://jsfiddle.net/pphfstos/6/

jQuery to update css height of element after animating

Here is the fiddle I'm working on: http://jsfiddle.net/fFYqF/
Basically it's a h1 above an h2 with some hidden paragraphs in-between them. This is all contained inside a div which I am trying to make visually centered (horizontally and vertically on the screen. I have used this css on the container div to center it on the page:
div#holder {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height:40%;
width:60%;
min-width:300px;
}
For this to work the width and the height of the div must be specified.
I have 2 problems... first, I don't know the height of the div so I have tried to use jQuery to apply it dynamically:
var h = $('#holder').height();
$('#main').css('height', h + 'px');
Secondly, I have a further bit of jQuery to animate the paragraphs of text open. This changes the height of the holder div thus rendering the earlier calculated height incorrect and the div is no longer vertically centered.
Is there a way to have the holder div always centered on the page? I.e. it should move up when it is opening.
Please see the fiddle above to see what I mean. Thanks

I have updated a branch of your fiddle to use a mixture of using .animate() with the height as well as the top position of the element to make it look like its opening up.

Have you tried the .animate method instead? I haven't tested this in a vertical-centered situation like you're describing, but I've used this method to increase the height of my containers when I'm bringing other elements into view.
$('#main').animate({height: '+='h }, 'slow');

make the whole page scroll beneath a certain height at the top without any scroll bar

html:
<div class="div_fixed"></div>
<div class="other_content">
content goes here
</div>
css:
.div_fixed{
position:fixed;
height:40px;
}
.other_content{
height:200px;
}
The div_fixed will remain fixed at the top position of the page.
But as the page scrolls up, the content of the div other_content will vanish just at the lower edge of the div div_fixed .
In the case of scrolling down the invisible content of other_content will begin to be visible from the lower edge of the div_fixed
How to achieve that ?
EDIT: no scroll bar should appear for any div

Use overflow: hidden to get rid of scrollbars

Is this what you're looking for? http://jsfiddle.net/BCRPa/

I've taken your HTML/CSS and added a bit on a jsFiddle - I think in order to achieve the effect you're looking for, you just need to make your content actually tall enough to be scrollable. At 200px high and one line of text, nothing is going to scroll.
So I made your other_content div taller, and then added a top: 0 to your .div_fixed selector, to keep it stuck to the top of the screen, and a margin-top: 40px to the .other_content div in order to have it start below the floating div.
If you want it to be a navbar-type thing, you can of course add a width: 100% to the .div_fixed.
All of this should transfer into a container div (with position: relative) fairly easily as well if you want, although you may have to re-position the fixed div.