Bootstrap Snippet On Scroll full Screen Change (Fix Screen Code on scroll Moving)) using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
  <nav>
   <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
   </ul>
  </nav>
</header>
<div class="content">
  <section id="home" class="scrollTo"></section>
  <section id="about" class="scrollTo"></section>
  <section id="services" class="scrollTo"></section>
  <section id="contact" class="scrollTo"></section>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
header {
 position: fixed;
 top: 0;
 width: 100%;
 height: 80px;
 background: #fff;
}
::-webkit-scrollbar { 
    display: none; 
}
nav {
 width: 960px;
 height: 80px;
 margin: 0 auto;
}
nav ul {
 margin: 20px 0 0;
}
nav ul li {
 display: inline-block;
 margin: 0 30px 0 0;
}
a { color: #4D4D4D;  font-family: sans-serif; text-transform: uppercase; text-decoration: none; line-height: 42px; }
.active { color: #2dbccb; }
.content { width: 100%; height: 100%; }
.content > section { width: 100%; height: 100%; }
#home { background: #2dbccb; }
#about { background: #f6c362; }
#services { background-color: #eb7e7f; }
#contact { background-color: #415c71; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var scrolling = false;
var currentPos = 0;
    function scrollUp(){
        if(!scrolling && currentPos > 0 ){
            scrolling=true;
            currentPos --;
            var scrollToElement = $('.scrollTo')[currentPos];
            $('html, body').animate({
                scrollTop: $(scrollToElement).offset().top
            }, 500, function(){
                scrolling = false;
            });      
        }
    }   
    function scrollDown(){   
        if(!scrolling && currentPos < $('.scrollTo').length-1  ){
            scrolling=true;
            currentPos ++;
            var scrollToElement = $('.scrollTo')[currentPos];
            $('html, body').animate({
                scrollTop: $(scrollToElement).offset().top
            }, 500,function(){
                scrolling = false;
            }); 
        }
    }    
    $(document).ready(function() {
        // Get the current position on load
        for( var i = 0; i < $('.scrollTo').length; i++){
            var elm = $('.scrollTo')[i];
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"On Scroll full Screen Change (Fix Screen Code on scroll Moving))"
Bootstrap 3.0.0 Snippet by naimansari

Related: See More

Questions / Comments:

"On Scroll full Screen Change (Fix Screen Code on scroll Moving))" Bootstrap 3.0.0 Snippet by naimansari

Related: See More

Questions / Comments:

"On Scroll full Screen Change (Fix Screen Code on scroll Moving))"
Bootstrap 3.0.0 Snippet by naimansari