+
Info

Back to list of all examples

Useful Stuff About:
Vertical Scrolling Responsive Design

This design will reconfigure itself for a smaller mobile device - resize your browser window to less than 768 pixels to see the effect.

Refresh your browser at the break point of 768px.

HTML

<div id="showBtns">+</div>
<div id="topBar">
<nav>
<div class="btn" id="btn1"><span>Button 1</span></div>
<div class="btn" id="btn2"><span>Button 2</span></div>
<div class="btn" id="btn3"><span>Button 3</span></div>
<div class="btn" id="btn4"><span>Button 4</span></div>
<div class="btn" id="btn5"><span>Button 5</span></div>
<div class="btn" id="btnProjects"><span>Projects</span></div>
</nav>
</div>
<section id="section1">
<header id="header1">Header 1</header>
<article id="article1">
<div class="centeringDiv">
<p>Article 1</p>
</div>
</article>
</section>
<section id="section2">
<header id="header2">Header 2</header>
<article id="article2">
<div class="centeringDiv">
<p>Article 2</p>
</div>
</article>
</section>
<section id="section3">
<header id="header3">Header 3</header>
<article id="article3">
<div class="centeringDiv">
<p>Article 3</p>
</div>
</article>
</section>
<section id="section4">
<header id="header4">Header 4</header>
<article id="article4">
<div class="centeringDiv">
<p>Article 4</p>
</div>
</article>
</section>
<section id="section5">
<header id="header5">Header 5</header>
<article id="article5">
<div class="centeringDiv">
<p>Article 5</p>
</div>
</article>
</section>
<footer>&copy; 20## First Last. All rights reserved.</footer>
Header 3

Here's CSS Code


header, section, article, aside, figure, figcaption, nav, footer {
display:block;
}
#topBar {/*This is a fixed position bar along the top*/
background-color: #000;/*0.5 makes the bar 50% transparent*/
position: fixed;
top: 0;
left: 0;
width: 100%;/*makes this bar as wide as the browser*/
height: auto;
z-index: 99998;/*places bar top most so it's always clickable*/
}
nav {
max-width: 980px;
width: 100%;
height: 50px;
margin: 0 auto;
display: -webkit-flex;/*for Chrome and Safari*/
display: flex;
flex-flow: row nowrap;
justify-content: center;
position: relative;
z-index: 99999;
}
#showBtns {
position:fixed;
width:32px;
height:32px;
font-size:1.5em;
background-color:#FF0004;
border-radius:50px;
z-index: 1000000;
top:5px;
left:5px;
text-align:center;
cursor:pointer;
padding:0;
display:none;/*don't show it with big screens*/
}
.btn {
cursor: pointer;/*You can also add styles such as text link color, custom fonts, font-size, etc.*/
width: 150px;
height: 50px;
position: relative;
background-color: #FFFFFF;
border: 1px #000 solid;
text-align: center;
margin: auto;
display: -webkit-flex;
display: flex;
border-radius: 100px;
align-content: center;
z-index: 1000000;
}
.btn:hover, #showBtns:hover {
/*You can add styles for when user hovers over the button*/
background-color: #00FF2A;
}
.btn span {
margin:auto;
}
section {
width: 100%;
background-size: cover;/*This makes the image proportionally resize itself to cover the width of the screen*/
background-origin: content-box;/*VERY IMPORTANT - this sets where the background begins to be visible*/
background-attachment: fixed;/*VERY IMPORTANT - this makes the image NOT scroll with the content*/
background-repeat: no-repeat;/*Not needed if your image is tall enough*/
position:relative;
}
#section1 {
margin-top:50px;
background-image: url(../images/bg1.jpg);/*Path relative to CSS File, not HTML file*/
}
#section2 {
background-image: url(../images/bg2.jpg);
}
#section3 {
background-image: url(../images/bg3.jpg);
}
#section4 {
background-image: url(../images/bg4.jpg);
}
#section5 {
background-image: url(../images/bg5.jpg);
}
header {
width: 100%;
height: 20vh;
padding-top: 10px;
font-size: 3em;
text-align: center;
position: relative;
top: 0;
left: 0;
}
article {
background-color: rgba(255,255,255,0.75);
height:auto;/*Allows this area to be vertically ELASTIC with non-floated content*/
width:100%;
position: relative;
overflow: auto;/*Allows this area to be vertically ELASTIC with floated content*/
}
.centeringDiv {
padding:10px;
max-width: 960px;
width:100%;
min-height:80vh;
height: auto;/*Allows this area to be vertically ELASTIC*/
margin: 0 auto;/*This centers the content on the browser*/
position: relative;
z-index: 200;
}
footer {
clear:both;/*clears away and floating or text wrapping*/
position:relative;
text-align:right;
font-size:0.8rem;
width:100%;
line-height:1.2rem;/*This will help to vertically center the text */
height:auto;
z-index:900;/*stacking order - below article, nav, and .btn*/
}
@media screen and (max-width:768px){
#showBtns {
display: block;/*VERY IMPORTANT!!!!*/
}
#topBar {
background-color: rgba(0,0,0,0.8);/*0.8 makes the bar 80% transparent*/
height: 100vh;/*This covers entire mobile device screen*/
z-index: 99998;
}
nav {
padding-top:50px;
display: block;
}
.btn {
width: 100%;
height: calc((100vh)/6 - (50px)/6);
background-color: #FFFFFF;
border: 1px #000 solid;
text-align: center;
margin: auto;
display: -webkit-flex;
display: flex;
border-radius: 100px;
align-content: center;
}
#section1 {
margin-top:0px;
}
header {
height: 70px;
font-size:1.5em;
}
.centeringDiv {
padding:5px;
min-height:calc(100vh - 70px);
}
}
Scripts

Scripts needed (copy and paste inside <head>) - check that you don't already have these because you only need ONE of each script.


<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/transit.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/ui.js"></script><!--VERY IMPORTANT!!!!-->
<script type="text/javascript" src="project#/scripts/p#-scripts.js"></script><!--ADJUST TO CORRECT PATH-->

 

Javascript Code


"use strict";
var topAdjustment, scrollTime, easingMethod;
var windowW=$(window).outerWidth(true);
//set initial values for variables
if (windowW < 768){
topAdjustment = 0;
} else {
topAdjustment = $("#topBar").height()-1;//the -1 is a mnior adjustment
}
scrollTime = 1000;//how much time in milliseconds 1000ms=1s do you want the scroll to occur
easingMethod = "easeInOutExpo";//type of easing for the scroll effect
//actions when buttons are clicked
$(".btn").click(function () {
var btnClicked=$(this).attr("ID");
var sectionNumber=btnClicked.substring(3,5);//extracts the button number, i.e. btn1 becomes 1
var targetSection = "#section"+sectionNumber;
if(btnClicked !== "btnProjects") {
$("html, body").stop().animate({//stop is for quick clicking of buttons to stop current action
"scrollTop": $(targetSection).offset().top - topAdjustment//the executes the scrolling action to new y position
}, scrollTime, easingMethod);
}
if (windowW < 768 && btnClicked !== "btnProjects"){
hideShowBtns();
}
});
var slideTime=250, btnStatus="showing";
function hideShowBtns() {
if(btnStatus === "showing"){
$("#topBar").hide("blind", {direction: "left"} , slideTime);
$("#showBtns").text("+");
btnStatus="";
} else {
$("#topBar").show("blind", {direction: "left"} , slideTime);
$("#showBtns").text("-");
btnStatus="showing";
}
};
$("#showBtns").click(function () {
hideShowBtns();
});
Header 5

Article 5