How to Get Fixed Children to Play Nicely with their Parents


Tags: jquery,html,css

Problem :

How can I get the blue #block to animate with the rest of the document when the #menu slides in/out?

Menu off screen with the default block position:

Menu off screen with the default block position

Menu on screen with the block incorrectly position:

Menu on screen with the block incorrectly position

Menu on screen with the block correctly positioned:

Menu on screen with the block correctly positioned

HTML

<body>
    <button>Menu Toggle</button>
    <div id="menu"></div>
    <div id="container">
        <div id="block"></div>
    </div>
</body>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    position: relative;
    overflow-x: hidden;
}

button {
    position: fixed;
    top: 10px;
    left: 10px;
    height: 30px;
    width: 100px;
    z-index: 100;
}

#menu {
    position: fixed;
    top: 0;
    left: -200px;
    height: 100%;
    width: 200px;
    background: orange;
}

#container {
    background: red;
    margin: 0 auto;
    height: 500vh;
    width: 500px;
}

#block {
    position: fixed;
    bottom: 0;
    background: blue;
    height: 100px;
    width: 100px;
}

JS

$('button').on('click', function() {
    if ( $('#menu').hasClass('active') ) {
        menuOut();
    } else {
        menuIn();
    }
});

function menuIn() {
    $('#menu').addClass('active').animate({'left':'0'});
    $('body').animate({'left': '200px'});
}

function menuOut() {
    $('#menu').removeClass('active').animate({'left':'-200px'});
    $('body').animate({'left': '0'});
}

A few notes:

  • #block is nested inside #container, but since its position is fixed it won't move with the body animation.

  • Whenever the browser is resized #block realigns itself correctly within #container

Here's a fiddle: http://jsfiddle.net/pa634x8p/1/


Follow up, I solved this by calculating the positioning of the #block and animating it from there.

http://jsfiddle.net/pa634x8p/3/

However, if there's a simpler way to accomplish this I'd still love to know.



Solution :

Give a position:relative to #container and a position:absolute and left:0 to #block Then, calculate the top position of #block element with setTop() function, on document ready, on window resize and on window scroll:

Check this DEMO

$('button').on('click', function() {
if ( $('#menu').hasClass('active') ) {
    menuOut();
} else {
    menuIn();
}
});

 function menuIn() {
$('#menu').addClass('active').animate({'left':'0'});
$('body').animate({'left': '200px'});
}

function menuOut() {
$('#menu').removeClass('active').animate({'left':'-200px'});
$('body').animate({'left': '0'});
}

var setTop = function() {
var block = $('#block');
var height = $(window).height();
var scroll = $(window).scrollTop();
var top = (parseInt(height) - 100) + parseInt(scroll);
console.log(top);
block.css({'top':top + 'px'});    
}
setTop();

$(window).resize(function() {
setTop();
});
$(window).scroll(function() {
setTop();
});

    CSS Howto..

    How to optimize this css code? [closed]

    How can I change the numbering of an order list's items?

    CSS - How to remove unwanted margin between elements?

    How to override css class without touching the HTML?

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How to load a new stylesheet when switching from JQuery Mobile site to PC site

    I have a nav bar that changes the src of an iframe, how can i change the active link color?

    How to control number of items per row using media queries in Flexbox?

    How to make a floating box in the center of the screen with responsive layout?

    How to crop an image edge

    How to have a background image size (without affecting the div)?

    How to get css and django working on live server

    How to create border corner spacing in CSS

    css menu active sub links to show on parent link

    How to handle CSS with meteor?

    How to Add custom Css Clases to PyroCMS contact form elements

    Option element bigger than select box - how to get the options list to expand to the left?

    Paragraph Span Class and h3 Are The Same Hex Code, But Are Showing Up As Different Colors

    How to highlight a currently selected item/section in Wordpress with CSS (maybe PHP too)?

    How to make a CSS transform affect the flow of other elements

    How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    How do I make a textarea resize properly when I resize browser window?

    how to make labels and button appear only when mouse is over a div in asp.net C#

    How do I prevent the element of an HTML5 form from moving slightly?

    how to select css class attributes from mootools,getStyle()?

    How is text thickness calculated according to css property “font-weight”?

    How To Display only First Word of H2 Heading With JavaScript or CSS

    How to organize CSS - table columns

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    HTML/CSS - how to align boxes / divs [closed]