CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jos3m
jos3m

Reputation: 125

Rest of divs are shown when resizing browser in single page website

I am developing a single page website, the page is composed by a header and a footer, both fixed at top and bottom respectively and the content in the middle. The content is a div with 100% of width and height.

At the header there is a menu to access the sections with smooth scrolling, everything works fine at this point, but when I choose the third section and resize the browser I can see the divs above and below, which should be hidden.

I tried to position the current div absolute with addClass/removeClass and modify the height when resize but did not work either.

This is the code:

CSS: 

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        body {
            background-color: red;
            overflow: hidden;
        }

        #cabecera, #footer {
            width: 100%;
            height: 50px;
            background-color: #D1D1D1;
            position: fixed;
            left: 0;
            z-index: 1000;
        }

        #cabecera {
            top: 0;
        }

        #footer {
            bottom: 0;
        }

        #menu li {
            list-style: none;
            float: left;
            margin-right: 10px;
        }

        #menu li span {
            cursor: pointer;
        }

        .centrar {
            width: 960px;
            margin: 0 auto;
        }

        #section1 {
            background-color: #fbfbfb;
        }

        #section2 {
            background-color: #017EFF;
        }

        #section3 {
            background-color: #9F25F6;
        }

        #section4 {
            background-color: #FB8114;
        }

        #section5 {
            background-color: #373737;
        }

        .layout {
            width: 100%;
            height: 100%;
        }

        .active {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

JAVASCRIPT: 

<script type="text/javascript">
        $(document).ready(function(){
            $('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                var target = this.hash;
                var $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 900, 'swing');

                /*$("#section1").removeClass("active");
                $("#section2").removeClass("active");
                $("#section3").removeClass("active");
                $("#section4").removeClass("active");
                $("#section5").removeClass("active");*/

                /*$target.addClass("active");*/
            });


            /*$(window).resize(function () {
                var doc = $(document).height() || $(window).height();

                var cabecera = $("#cabecera").height();
                var footer = $("#footer").height();

                var margin = doc - cabecera - footer;
                $('#section3').css({ 'min-height': + margin + 'px' });
            });

            $(window).resize();*/
        });
    </script>

HTML: 

<body>
    <div id="cabecera">
        <div class="centrar">
            <ul id="menu">
                <li><a href="#section1" target="_self">section1</a></li>
                <li><a href="#section2" target="_self">section2</a></li>
                <li><a href="#section3" target="_self">section3</a></li>
                <li><a href="#section4" target="_self">section4</a></li>
                <li><a href="#section5" target="_self">section5</a></li>
            </ul>
        </div>
    </div>

    <div id="section1" class="layout"></div>
    <div id="section2" class="layout"></div>
    <div id="section3" class="layout"></div>
    <div id="section4" class="layout"></div>
    <div id="section5" class="layout"></div>

    <div id="footer">
        <div class="centrar"></div>
    </div>
</body>

EDIT:
Screenshot normal browser // Screenshot resized browser

Steps to reproduce:
1) Open the browser resized to a small window
2) Open the page
3) Go to "section3"
4) Change the height of the browser, increasing or decrementing
5) Take a look at the divs above and below :S

Upvotes: 0

Views: 116

Answers (1)

Csaba Adam Meszaros
Csaba Adam Meszaros

Reputation: 124

You have to scroll to the top of the selected element(initialized on first) on the resize event of the window without any animation so that it gets executed transparently for the visitor.

The $target variable needs to be declared "globally" so that the resize function will know which was the last accessed section.

<script type="text/javascript">
        $(document).ready(function(){
            var $target = $(".layout:first");
            $('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                var target = this.hash;
                $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 900, 'swing');

            });
            $(window).resize(function(){
                $(window).scrollTop($target.offset().top);
            });
        });
    </script>

Upvotes: 0

Related Questions