Geek asks and answers

How to set percentage width of fixed position div based on parent element

I am working on Wordpress, and I need to make a div attached on top when the page scrolls. Div (.details) should have a percentage width for reciprocal reasons. I found javascript to stop the div (.details) when it is 40px above, switching it from a relative position to a fixed one. It has a width of 25% in relative position, but when it becomes fixed, the width of 25% is now based on the window, and it is not based on the parent element (.entry), which is smaller than the window, so it gets larger when I scroll. This is CSS and Javascript (. Carousel is another div inside .entry, it's to the left of .details):

<style>
.entry { position:relative; width:100%; }
.carousel { width:70%; height: auto; position: relative; float: left; margin-top: 0px;}
.details { width: 25px; height: 100%; float: right; margin-top: 0px; line-height: 20px;} 
</style>

<script>
$(window).scroll(function(){
if  ($(window).scrollTop() >= 90){
     $('.details').css({position:'fixed',right:40,top:40,width:'25%'});
} else {
     $('.details').css({position:'relative',right:0,top:0,width:'25%'});
    }
});
</script>

.details div .entry, . - - ? Javascript. !

+3
1

- .details JavaScript. :

$(window).scroll(function(){
    if($(window).scrollTop() >= 90){
        $('.details').css({position:'fixed',right:40,top:40});
    } else {
        $('.details').css({position:'relative',right:0,top:0});
    }
});


// set the width of the details div when window resizes
window.addEventListener('resize', function(){

    var $el = $('.details')

    $el.width( $el.parent().outerWidth() * .25 )

})

+3

More articles:


All Articles