-1

Fulllscreen div misbehave on window resize.
Demo

fullpage is main container having fullscreen height & width.
section is inner div of full height & width.
When window is resized after scrolling to any div it leaves some space from top.

How to make it responsive & scrolling fullscreen page?

(section should stick to top & left : margin, padding to left = 0)

Menu

<ul id="menu">
  <li><a href="#section-0"> home </a></li>
  <li><a href="#section-1"> about </a></li>
  <li><a href="#section-2"> services </a></li>
  <li><a href="#section-3"> gallery </a></li>
  <li><a href="#section-4"> contact </a></li>
</ul>

Fullscreen Div container, .fullpage, Contains Fullscreen Div .section

<div class="fullpage">
  <div class="section" id="section-0">
    <h1>Home</h1>
  </div>
  <div class="section" id="section-1">
    <h1>About</h1>
  </div>
  <div class="section" id="section-2">
    <h1>Services</h1>
  </div>
  <div class="section" id="section-3">
    <h1>Gallery</h1>
  </div>
  <div class="section" id="section-4">
    <h1>Contact</h1>
  </div>
</div>

Script to scroll section

    jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";//html, body
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};





        $("#menu li a").click(function(e) {

            // e.preventDefault();
            var target = $(this).attr('href');

            $.scrollTo(target);        

            return false;
        });

CSS

#menu {
    position: fixed;
    z-index: 1000;
    background: #F03438;
    float: left;
}
.fullpage {
    position: absolute;
    width: 100%;
    height: 100%;
}
.section {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    border: 2px solid #FFFFFF;
    margin: 0 !important;
}
3
Contributors
3
Replies
19
Views
1 Year
Discussion Span
Last Post by ewai1
0

Got Little solution
Now problem with modified click function.

target stores garbage values

$("#menu div a").click(function(e) {            

            var target = $(this).attr('href');
            $.scrollTo(target);     

            var windowHeight = $(window).height(),
            gridTop = windowHeight * .3,
            gridBottom = windowHeight * .6; 


             $(window).on('resize', function () {

            $(target).each(function () {

                var thisTop = $(target).offset().top - $(window).scrollTop();

                if (thisTop > gridTop ) {
                   // $(this).css('background', 'red');
                    //$.scrollTo(target); 
                } else {
                   // $(this).css('background', 'gray');
                    $.scrollTo(target); 
                }
            });
        });



            return false;
        });
0

From what I've got from your description, you need to use media queries to make your page responsive.
Also, try not to use !important in your CSS, and multiple H1 in your HTML

Edited by double_virginia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.