Full height

by devangkantharia

HTML

<div id="dv1" class="frst fullHeight" style="height: 899px;">
    <p style="padding-top: 224.75px;">content</p>
</div>
<div id="dv2" class="scnd fullHeight" style="height: 899px;">
    <p style="padding-top: 224.75px;">content</p>
</div>
<div id="dv3" class="thrd fullHeight" style="height: 899px;">
    <p style="padding-top: 224.75px;">content</p>
</div>
<ul class="nav">
    <li id="1" class="active"></li>
    <li id="2"></li>
    <li id="3"></li>
</ul>

CSS

body {
    overflow:hidden;
}    
.frst {
        background-color:red;
    }
    .scnd {
        background-color:yellow;
    }
    .thrd {
        background-color:grey;
    }
    .fullHeight {
        width:100%;
    }
    p {
        font-size:100px;
        margin:0;
        text-align:center;
        padding:0;
    }
    .nav li {
        display:block;
        background-color:grey;
        padding:3px;
        width:5px;
        height:5px;
        margin:3px 0px;
        cursor:pointer;
        border-radius:6px;
        border:1px solid transparent;
    }
    .nav li.active {
        border-color:darkgray;
        background-color:transparent;
    }
    .nav {
        position:fixed;
        top:40%;
        right:20px;
    }

JavaScript

$(".fullHeight").css("height", $(window).height());
$("p").css("padding-top", ($(window).height()) / 4);
$(window).resize(function () {
    $(".fullHeight").css("height", $(window).height());
});
var selector = "";
$(".nav li").click(function () {
    if (!($('html body').is(":animated"))) {
        $(".active").removeClass("active");
        $(this).addClass("active");
        selector = "#dv" + $(this).attr("id");
        $('html body').animate({
            scrollTop: $(selector).offset().top
        }, 1000);
    }
});


var prevScroll = 0;
$('body').bind('DOMMouseScroll mousewheel',function (e) {
    e.preventDefault();
    var id = 0;
     if (!($('html body').is(":animated"))) {
            console.log("id: "+id +"outside");
        var newScroll = $(window).scrollTop();
       if(e.originalEvent.wheelDelta < 0){
            id =  parseInt($(".active").attr("id")) + 1;
            console.log("id: "+id +"inc");
        }
        else{
            id =  parseInt($(".active").attr("id")) - 1;
            console.log("id: "+id+"dec");
        }
         var idSelec = "#"+id;
         $(idSelec).trigger("click");
    }
});