Develop Reference

Why doesn't my nav bar hide when scrolling down and appear when scrolling up?

So I've tried adapting this http://jsfiddle.net/mariusc23/s6mLJ/31/ code to my webpage so that my nav bar hides when scrolling down and appears when scrolling back up, however it doesn't seem to work and I just can't see the problem, I've included my code below, thanks for the help!
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
</script>
<style type="text/css">
a {
box-sizing: border-box;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}
header {
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
}
.nav-up {
top: -110px;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</li> <!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
I'm currently trying to make a movie review blog post and really want to make everything just stand out, but I'm only relatively new to Css,html and javascript therefore I really can't identify any problems I might have and how to fix them. Again thank you for y'alls help :)

its because you have additional closing tag on line no 15 and 98 in your html, I have fixed that see below demo
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
a {
box-sizing: border-box;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}
header {
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
}
.nav-up {
top: -110px;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>

Content height changed on click JS events triggering

Here I add the expected layout and codepen repository
and here is my front end code
.mgh-std-com-area {
margin: 80px 0;
}
.mgh-std-com-sitem {
transition: all 0.4s ease-in-out;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
cursor: pointer;
}
.mgh-std-com-sitem:hover {
background: #EEF9F9;
}
.mgh-std-com-sitem:hover>.mgh-sc-box {
background: #ffffff;
}
.mgh-std-com-sitem .mgh-sc-box {
transition: all 0.4s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
width: 140px;
height: 140px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #EEF9F9;
}
.mgh-std-com-sitem .mgh-sc-box img {
width: 50px;
height: 50px;
}
.mgh-std-com-sitem h5 {
color: #2F2F2F;
position: relative;
padding-bottom: 30px;
font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1600 - 300)));
}
.mgh-std-com-sitem h5::after {
content: '';
width: 80px;
height: 3px;
background: #349DCD;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.mgh-std-com-sitem p {
margin-top: 20px;
color: #2f2f2f;
font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
}
.mgh-btn {
transition: all 0.6s ease-in-out;
background-image: linear-gradient(to right, #50C1C4, #349DCD);
color: #ffffff;
text-decoration: none;
padding: .9em 1em;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
width: 180px;
display: inline-block;
text-align: center;
}
.mgh-btn:hover {
background-image: linear-gradient(to left, #50C1C4, #349DCD);
text-decoration: none;
color: #ffffff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="mgh-common-header text-center" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
<h2>Standards & Compliances</h2>
<p>Maintaining the highest of standards while conforming to regulations</p>
</div>
<div class="mgh-std-com">
<div class="row text-center justify-content-sm-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
<div class="mgh-std-com-sitem text-center">
<div class="mgh-sc-box mb-3">
<img src="assets/images/std-one.svg" alt="">
</div>
<h5>
At MGH Healthcare, quality is a shared responsibility
</h5>
<p>Quality is the core value of MGH Healthcare that it ensures to be implemented at all levels. ADS’s management will ensure that this policy and relevant all legal and regulatory requirements are effectively communicated to the employees and other
concerned personnel of quality assurance and operations to uphold company’s high standards of quality compliance at all times.</p>
read more
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto pt-5 pt-xl-0" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="1000">
<div class="mgh-std-com-sitem text-center">
<div class="mgh-sc-box mb-3">
<img src="assets/images/std-two.svg" alt="">
</div>
<h5>
Putting safety of products, customers and employees as
</h5>
<p>As a responsible business organization, MGH Healthcare operates its business according to the directives and guidelines of GxP, HSE and other local regulatory authorities. MGH Healthcare has stringent mandatory quality standards which ensure
quality and safety of its products which conform to the relevant industry and regulatory standards.</p>
read more
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto pt-5 pt-xl-0" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="2000" data-aos-delay="2000">
<div class="mgh-std-com-sitem text-center">
<div class="mgh-sc-box mb-3">
<img src="assets/images/std-three.svg" alt="">
</div>
<h5>
Building and maintaining a system to ensure quality and safety at all levels.
</h5>
<p>MGH Healthcare maintains a management system, which proactively and continuously develop its processes and systems to ensure quality and safety throughout the whole chain by providing training and resources. MGH Healthcare regularly evaluates
and improves its performances using both internal and external measures.
</p>
read more
</div>
</div>
</div>
</div>
</div>
I have to need, when click on button height will be changed and text will be extend with some css transitions effects! example screenshot has been added.
Thanks in advance!

Please try this,
Try to manipulate css of text-matter class and adjust height according to your need, this class is to hide the extra text matter and when a button is clicked full text will be shown.
Check this Pen
var classname = document.getElementsByClassName("mgh-btn");
var font_to_incr_by = 2;
var sibling;
var myFunction = function() {
sibling = this.previousElementSibling;
this.previousElementSibling.classList.remove('text-matter');
this.previousElementSibling.classList.add('text-matter-rev');
var font_h5 = parseFloat(window.getComputedStyle(sibling.previousElementSibling, null).getPropertyValue('font-size'));
sibling.previousElementSibling.style.fontSize = (font_h5 + font_to_incr_by) + 'px';
var font_p = parseFloat(window.getComputedStyle(sibling, null).getPropertyValue('font-size'));
sibling.style.fontSize = (font_p + font_to_incr_by) + 'px';
this.closest(".mgh-std-com-sitem").classList.add("border-blue");
this.closest(".mgh-std-com-sitem").style.padding='0';
for (let i = 0; i < classname.length; i++) {
if (classname[i].previousElementSibling != this.previousElementSibling) {
let sibling = classname[i].previousElementSibling;
classname[i].previousElementSibling.classList.add('text-matter');
classname[i].previousElementSibling.classList.remove('text-matter-rev');
classname[i].closest(".mgh-std-com-sitem").classList.remove("border-blue");
sibling.previousElementSibling.style.fontSize = font_h5 + 'px';
sibling.style.fontSize = font_p + 'px';
classname[i].closest(".mgh-std-com-sitem").style.padding='50px';
}
}
};
var myFunction2 = function() {
sibling == this ? this.nextElementSibling.classList.add('clicked') : this.nextElementSibling.classList.remove('clicked');
};
for (let i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
classname[i].previousElementSibling.addEventListener('transitionend', myFunction2, false);
}
.mgh-std-com-area {
margin: 80px 0;
}
.mgh-std-com-sitem {
/* transition: all 0.4s ease-in-out; */
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
cursor: pointer;
border: 2px solid transparent;
height: 600px
}
.mgh-std-com-sitem:hover {
background: #EEF9F9;
}
.mgh-std-com-sitem:hover>.mgh-sc-box {
background: #ffffff;
}
.mgh-std-com-sitem .mgh-sc-box {
/* transition: all 0.4s ease-in-out; */
display: flex;
justify-content: center;
align-items: center;
width: 140px;
height: 140px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #EEF9F9;
}
.mgh-std-com-sitem .mgh-sc-box img {
width: 50px;
height: 50px;
}
.mgh-std-com-sitem h5 {
color: #2F2F2F;
position: relative;
padding-bottom: 30px;
font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1600 - 300)));
}
.mgh-std-com-sitem h5::after {
content: '';
width: 80px;
height: 3px;
background: #349DCD;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.mgh-std-com-sitem p {
margin-top: 20px;
color: #2f2f2f;
font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
}
.mgh-btn {
background-image: linear-gradient(to right, #50C1C4, #349DCD);
color: #ffffff;
text-decoration: none;
padding: .9em 1em;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
width: 180px;
display: inline-block;
text-align: center;
margin-top: 10px;
}
.mgh-btn:hover {
background-image: linear-gradient(to left, #50C1C4, #349DCD);
text-decoration: none;
color: #ffffff;
}
.text-matter {
max-height: 125px;
overflow: hidden;
transition: all linear 1s;
}
.text-matter-rev {
max-height: 500px;
transition: all linear 1s;
}
.clicked {
display: none;
}
.border-blue {
border: 2px solid #84c9f3 !important;
}
.mgh-std-com{
height: 600px
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<div class="container-fluid">
<div class="mgh-common-header text-center" data-aos="fade-up" data-aos-easing="ease-in-cubic"
data-aos-duration="1500" data-aos-delay="0">
<h2>Standards & Compliances</h2>
<p>Maintaining the highest of standards while conforming to regulations</p>
</div>
<div class="mgh-std-com">
<div class="row text-center justify-content-sm-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto" data-aos="fade-up"
data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
<div class="mgh-std-com-sitem text-center">
<div class="mgh-sc-box mb-3">
<img src="assets/images/std-one.svg" alt="">
</div>
<h5>
At MGH Healthcare, quality is a shared responsibility
</h5>
<p class="text-matter">Quality is the core value of MGH Healthcare that it ensures to be implemented at all levels. ADS’s
management will ensure that this policy and relevant all legal and regulatory requirements are effectively
communicated to the employees and other concerned personnel of quality assurance and operations to uphold
company’s high standards of
quality compliance at all times.</p>
<a class="mgh-btn">read more</a>
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto pt-5 pt-xl-0" data-aos="fade-up"
data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="1000">
<div class="mgh-std-com-sitem text-center">
<div class="mgh-sc-box mb-3">
<img src="assets/images/std-two.svg" alt="">
</div>
<h5>
Putting safety of products, customers and employees as
</h5>
<p class="text-matter">As a responsible business organization, MGH Healthcare operates its business according to the directives
and guidelines of GxP, HSE and other local regulatory authorities. MGH Healthcare has stringent mandatory
quality standards which ensure quality and safety of its products which conform to the relevant industry
and regulatory standards.</p>
<a class="mgh-btn">read more</a>
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto pt-5 pt-xl-0" data-aos="fade-up"
data-aos-easing="ease-in-cubic" data-aos-duration="2000" data-aos-delay="2000">
<div class="mgh-std-com-sitem text-center">
<div class="mgh-sc-box mb-3">
<img src="assets/images/std-three.svg" alt="">
</div>
<h5>
Building and maintaining a system to ensure quality and safety at all levels.
</h5>
<p class="text-matter">MGH Healthcare maintains a management system, which proactively and continuously develop its processes
and systems to ensure quality and safety throughout the whole chain by providing training and resources.
MGH Healthcare regularly evaluates and improves its performances using both internal and external
measures.</p>
<a class="mgh-btn">read more</a>
</div>
</div>
</div>
</div>
</div>

In vanilla javascript you do something like this:
const elements = document.querySelectorAll('.mgh-std-com-sitem');
elements.forEach(el => {
el.addEventListener("click", () => {
if (!el.classList.contains('transition-class-name')) {
el.classList.add('transition-class-name');
} else {
el.classList.remove('transition-class-name');
}
});
});
This would add the transition-class-name to the element on click if it is not there already. If the element has the class - it will remove it. Essentially it will toggle the element on click.
EDIT: Here is a revised pen to illustrate the usage: https://codepen.io/anon/pen/VNNLBe
Note that you might need to update your CSS/selectors for it to do exactly what you might want.

How to create a polling system in HTML for a movie review website?

How do I creating a voting system that uses checkboxes for 1 star, 2 stars, 3 stars, 4 stars and 5 stars. According to what the user picks it will generate an average user rating from the given votes and display the number of stars required.
I am not sure where exactly to start in terms of gathering the input from the user etc...This is all the code I have for now
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0 auto; /* Center website */
max-width: 800px; /* Max width */
padding: 20px;
}
.heading {
font-size: 25px;
margin-right: 25px;
}
.fa {
font-size: 25px;
}
.checked {
color: orange;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: right;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Individual bars */
.bar-5 {width: 60%; height: 18px; background-color: #4CAF50;}
.bar-4 {width: 30%; height: 18px; background-color: #2196F3;}
.bar-3 {width: 10%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 4%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 15%; height: 18px; background-color: #f44336;}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
</style>
</head>
<body>
<span class="heading">User Rating</span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<p>4.1 average based on 254 reviews.</p>
<hr style="border:3px solid #f1f1f1">
<div class="row">
<div class="side">
<div>5 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-5"></div>
</div>
</div>
<div class="side right">
<div>150</div>
</div>
<div class="side">
<div>4 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-4"></div>
</div>
</div>
<div class="side right">
<div>63</div>
</div>
<div class="side">
<div>3 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-3"></div>
</div>
</div>
<div class="side right">
<div>15</div>
</div>
<div class="side">
<div>2 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-2"></div>
</div>
</div>
<div class="side right">
<div>6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-1"></div>
</div>
</div>
<div class="side right">
<div>20</div>
</div>
</div>
</body>
</html>

Usually a 5-star polling system will require a database and a backend programming language. i.e. Mysql and PHP.
Here is an example:
https://www.script-tutorials.com/how-to-create-own-voting-system/

Replace Text on Hover with Jquery or JavaScript

I'm looking for a way with Jquery or JS to make it so that when I mouseover one of these divs, the text and icon disappears and "Read More" appears. I've seen some guides but they don't really seem to be accomplishing the whole job, it removes one line of text rather than clearing the entire div, and replacing it with a centered "Read More" text on mouseover, then going back to the normal text when the mouse exits hover. Does anyone have any suggestions?
The divs are horizontal on the actual page, not sure why it's showing up as vertical here.
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
</div>
</div>
</div>

This should help you to get started.. I'm using .css('visibility', 'hidden'); to hide text only because I didn't wanted to change or alter box height..
Ofcourse if that is not the case that you need (you can only use some css to fix the height) then you can use .hide() and .show() to show and hide text on mouse events
$('.feature-box').on('mouseenter', function(){
$(this).find('i, h4:not(.rm), p').css('visibility', 'hidden');
$(this).find('h4.rm').css('visibility', 'visible');
});
$('.feature-box').on('mouseleave', function(){
$(this).find('i, h4:not(.rm), p').css('visibility', 'visible');
$(this).find('h4.rm').css('visibility', 'hidden');
});
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
h4.rm{ visibility: hidden; }
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<h4 class="rm">Read more</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<h4 class="rm">Read more</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<h4 class="rm">Read more</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<h4 class="rm">Read more</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
</div>
</div>
</div>

To accomplish this I suggest you to use CSS only solution.
Add new div, position it absolutely and on feature-box hover just display it.
In order the position to work, feature-box has to have position: relative and new div should have larger z-index, and top: 0; set

You can achieve it with css see below if that is what you require.
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
display: inline-block;
}
span.read-more {
display: none;
font-weight: bold;
position: absolute;
z-index: 10;
top: 0;
}
.feature-box:hover p {
display: none;
}
.feature-box:hover span.read-more {
display: block;
position: relative;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p><span class="read-more">read more</span>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p><span class="read-more">read more</span>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p><span class="read-more">read more</span>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
<span class="read-more">read more</span>
</div>
</div>
</div>

If you dont have to dynamically manipulate de 'boxes', you could do it using a couple of extra tag and css like this:
.feature-container{ box-shadow:0 1px 6px rgba(0,0,0,0.1); position:relative; z-index:9; width:100%; display:inline-block;}
.feature-box{background:#fff; text-align:center; padding:40px 30px; position:relative; width:25%;display:inline-block;}
.feature-box i{font-size:50px; margin-bottom:15px; cursor:pointer;}
.feature-box:hover{background:#208541 !important; color:#f6f6f6;}
.feature-box.dark{background:#f6f6f6;}
.feature-box .mask{display:none;}
.feature-box:hover .mask{background-color:#333;color:white;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;text-align:center;display:block;}
.feature-box:hover .mask span{position: relative;float: left;top: 50%;left: 50%;transform: translate(-50%, -50%);}
<div class="feature-container" >
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
</div>
</div>
if you dont need any fancy styles for the "read more" text, you could use .feature-box:hover::before{} to add the text and center it as i did with .mask span.

sticky div switches sides when fixed position added via JavaScript

I'm trying to implement a sticky div that is always present in the view when scrolling. My javascript code works fine, and the div is indeed scrolling with the page. The problem is when I apply position: fixed; to the my sticky div of class scrolling-panel, it switches position from the right of the page (the original position) to the left.
Here is my HTML (most relevant part, still a lot of markup though)
<div class="container">
<div class="main-container">
<div class="row">
<div class="col-md-12">
<img id="brand-logo" src="images/logo.png">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="container">
<img id='slider-img' src='images/img1.png'>
<div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
<div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
</div>
</div>
</div>
<div class="scrolling-panel">
<h3>Get Started</h3>
<h3>$45</h3>
<p>Join the Club for exclusive pric- ing. See a new box each month and skip if it’s not for you.</p>
<button class="btn btn-success"><small>Join the club + get refresh</small></button>
<p>Want Refresh without joining?
Quick Buy for $55.</p>
</div>
<div class="row">
<div class="col-md-8">
<div class="para-intro">
<h1>REFRESH</h1>
<p>Time to toss the cheap plastic bags -- your dopp kit should be
as composed as the rest of your travel getup. Our friends at
Men’s Journal helped us bring back this classic. Get ready to
breathe new life into your bathroom cabinet and carry-on.</p>
</div>
</div>
<div class="col-md-8">
<div class="sm-content-list">
<ul class="ul-content-list">
<li>DOPP KIT<br>
<span class='doppkit-value'>10"X6"X4"</span></li>
<li>DOUBLE HITTER<br>
2-IN-1 SHAMPOO &<br>
CONDITIONER<br>
<span class='doppkit-value'>8.5oz</span></li>
<li>CLEAN CUT<br>
SEMI-MATTE<br>
STYLING CREAM<br>
<span class='doppkit-value'>3.0oz</span></li>
<li>HANDMADE GOLD<br>
MOSS SOAP<br>
<span class='doppkit-value'>5.0oz</span></li>
<li>FACE WASH<br>
<span class='doppkit-value'>4.4oz</span></li>
<li>LOTION<br>
0.75oz</li>
<li>BODY POWDER<br>
<span class='doppkit-value'>1.0oz</span></li>
</ul>
</div>
<!-- <div class="col-md-5"> -->
<div class="dopp-kit">
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
</div>
</div>
<div class="col-md-8">
<div class="tabbed-interface">
<div class="appearing-content">
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to wearing down. Designed exclusively for Bespoke, each bag was painstakingly handcrafted in the good old US of A.</p>
</div>
</div>
<div class="clickable-links">
<a class='links-toggle'>blabla</a>
<a class='links-toggle'>blabla</a>
<a class='links-toggle'>blabla</a>
</div>
<div class="changing-para">
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to wearing down. De- signed exclusively for Bespoke, each bag was painstakingly handcrafted in the good old US of A. The waterproof exterior is crafted from heavy, 15oz waxed canvas sourced from family mills in the heartland, while the full-grain leather handle and pull tab, bronze rivets and zipper, and signature blue ballistic nylon lining boast a rugged simplicity. Americana at its best.</p>
</div>
</div>
</div>
<div class='media-objects'>
<h3> From The Post </h3>
<div class="row">
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>The Perfect Side Part for any Hair Type</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Grooming Tips</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>How Soap is Made</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Behind the Scenes with Sasquatch Soap</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Blue Claw's Adam Blitzer Talks Design</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>How To Shine Your Shoes</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS (also using bootstrap for its grid system):
p {
font-family: times;
font-size: 15px;
}
#container {
height: 400px;
width: 650px;
margin: 20px auto 35px auto;
position: relative;
}
.main-container {
margin: 40px 130px 40px 130px;
border: solid black 1px;
}
#slider-img {
height: 400px;
width: 650px;
position: absolute;
}
#left_holder {
height: 400px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 400px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top:40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top:40%;
right: 0px;
}
img#brand-logo {
margin-top: 25px;
margin-left: auto;
margin-right: auto;
display: block;
height: 12px;
width:120px;
}
.para-intro {
margin-left: 110px;
}
.para-intro h1 {
margin-top: 0px;
}
.sm-content-list {
background-color: rgb(240,240,234);
margin-left: 110px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
ul.ul-content-list {
list-style-type: none;
margin: 0px;
padding: 5px 8px 5px 8px;
}
.ul-content-list li {
font-size: 8px;
font-weight: 600
}
.dopp-kit {
margin-left: 110px;
}
.dopp-kit h5 {
margin-bottom: 2px;
margin-top: 0px;
}
.tabbed-interface {
background-color: blue;
margin-top: 20px;
margin-left: 110px;
height: 250px;
width: 450px;
}
.clickable-links a {
text-align: center;
display: inline-block;
margin-left: 110px;
color: rgb(204,204,204);
hover: none;
}
.clickable-links {
text-align: center;
margin-top: 10px;
}
.changing-para {
margin-left: 110px;
margin-bottom: 20px;
margin-top: 30px;
}
.media-objects {
margin-left: 110px;
margin-bottom: 30px;
}
.media-objects h3 {
margin-bottom: 30px;
}
.media-objects p {
font-size: 12px;
}
.scrolling-panel {
background-color: rgb(240,240,234);
height: 270px;
width: 170px;
float: right;
margin-right: 115px;
text-align: center;
}
.scrolling-panel p {
font-size: 10px;
}
.company-color {
color: rgb(153,66,60);
}
.doppkit-value {
color: rgb(151,151,151);
}
.appearing-content {
color: white;
float: bottom;
}
.stick {
margin-right: 115px;
position:fixed;
top:0px;
}
Javascript for the sticky scrolling-panel div:
$(document).ready(function() {
var s = $(".scrolling-panel");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
Let me know if I haven't been clear enough and/or if you need more information

Instead of margin-right on the element (in .stick class) use a right value.
Here's a fiddle example