CODEWITHSUNDEEP
jqueryhtmlcssoverflowcss-position
Adam
Adam

Reputation: 19

position:fixed overflowing parent

Any help would be much appreciated.

Below is a simplified code snippet. The issue I’m having is the “logo” class is positioned exactly as I would want it to be, that is relative to the entire page/window. So as I scroll down the page the “logo” elements move down the page within the parent element.

The issue is that despite the fact the “logo” element is a child of the “page” element the “logo” is always visible even when outside of the parent’s bounds despite the setting the parents “overflow” to “hidden”.

If anyone knows how to rectify the issue with CSS that would be fantastic and preferred. jQuery (JavaScript) is also an option though I would prefer to steer away from this if I can as I’m very aware the site is going to be very JavaScript heavy once complete.

<style>
.page{
    width:100%;
    height:1000px;
    overflow:hidden;
}
.logo{
    position:fixed;
    margin:20px;
}
</style>

<div class="page">
    <div class="logo"></div>
<div>
<div class="page">
    <div class="logo"></div>
<div>

Upvotes: 0

Views: 300

Answers (2)

PlantTheIdea
PlantTheIdea

Reputation: 16359

Cannot be done. Taken from here:

Because a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant.

As requested, entirely theoretical possible jQuery solution:

$(window).scroll(function(){
    if($(this).scrollTop()>=1000){
        $('#ItemToHide').hide();
    } else {
        $('#ItemToHide').show();
    }
});

This is super sloppy, obviously can be improved, but something like this might work.

Upvotes: 2

Leeish
Leeish

Reputation: 5213

You probably want absolute positioning. An absolute positioned element is based on its parent element. So logo absolute position with top: 20px will place it 20 pixels from the top of the page element. Fixed with a top of 20px places it 20px from the top of the window. However for absolute positioning to work, your page element will need a position of at least relative.

http://www.w3schools.com/css/css_positioning.asp

Upvotes: 1

Related Questions