Develop Reference

Show hidden nth-child items onclick

I have a list of content which is all viewable on desktop. On mobile, I have hidden some of the content and want to add a button, which on click, would show the hidden content.
I'm aware of how to hide and show div's on click, ie.
function showClass(id) {
var elem = document.getElementById(id);
var visible = getComputedStyle(elem).display == "block";
if (!visible) {
elem.style.display = "block"
} else {
elem.style.display = "none"
}
}
But unsure on how to approach this for items that are in the same class that are hidden via nth-child?
Markup:
#media(max-width: 576px){
.wrapper:nth-of-type(n+4) {
display: none;
}
}
.showmore{
display: none;
}
#media(max-width: 576px){
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore" onclick="show">Show more</a>
</div>

Use the :not() pseudo-class to only hide the items when the .show-all class is not present on the container:
const container = document.querySelector('.container')
const showmore = document.querySelector('.showmore')
showmore.addEventListener('click', () =>
container.classList.toggle('show-all')
)
.showmore{
display: none;
}
#media(max-width: 576px){
.container:not(.show-all) .wrapper:nth-of-type(n+4) {
display: none;
}
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore">Show more</a>
</div>

I'd first change the placement of the "show more" link in the markup, in order to keep a more consistent order of reading.
With this approach you need to hide all the sibling elements of the link and the click event just removes the link itself, showing all the remaining content.
In this example the link is visible under 640px (open the demo in a full page) and I've also inserted a small fade effect over the text before the link (just remove the linear gradient if you are not interested)
document.querySelector('.showmore').addEventListener('click', function(ev) {
ev.preventDefault();
this.remove();
})
.showmore {
display: none;
margin-top: -5em;
}
.showmore::before {
content: "";
display: block;
height: 5em;
background: linear-gradient(to bottom, transparent, #fff);
}
#media all and (max-width:640px) {
.showmore {
display: block;
position: relative;
}
.showmore ~ * { display: none; }
}
<div class="container">
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<a class="showmore" href="#">Show more</a>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
</div>

How to animate multiple elements, when using the same classes?

I'm am trying to make multiple boxes, which can expand onclick and close again when clicking on the X. Well first off, the close jquery doesn't work, but that isn't the main thing I'am looking fore, how can I optimize the code, so doesn't become 400-600 hundred lines of the same, just for each box/element.
When click on one box/element, it should expand and so should the content inside - in the order as they come. Then it can be closed again an you would be able to click on another element with the same result - using pretty much the same code.
How can I make the site know, which element has bin click on.
Thanks in advance :)
$(document).ready(function(){
$( ".calendarBox" ).click(function() {
$(".calendarBox").addClass("calendarBoxOpen").delay(2000);
$(".dateTitle").addClass("dateTitleOpen");
$(".dateMonthBox").addClass("dateMonthBoxOpen");
$(".closeMonth").addClass("showMonth");
$(".dateDayBox").addClass("dateDayBoxOpen");
$(".closeDay").addClass("showDay");
$(".dateCloseBtnBox").addClass("dateOpenBtnBox");
$(".closeHr").addClass("showHr");
$(".dayActivitiesInfo").addClass("dayActivitiesInfoOpned");
$(".dayInfoTxt_1May").addClass("dayInfoTxt_1MayOpen");
$(".dayInfoBtnBox_1Maj").addClass("dayInfoBtnBox_1MajOpen");
});
});
$(document).ready(function(){
$( ".dateCloseBtn" ).click(function() {
$(".dayInfoBtnBox_1Maj").removeClass("dayInfoBtnBox_1MajOpen");
$(".dayInfoTxt_1May").removeClass("dayInfoTxt_1MayOpen");
$(".dayActivitiesInfo").removeClass("dayActivitiesInfoOpned");
$(".closeHr").removeClass("showHr");
$(".dateCloseBtnBox").removeClass("dateOpenBtnBox");
$(".closeDay").removeClass("showDay");
$(".dateDayBox").removeClass("dateDayBoxOpen");
$(".closeMonth").removeClass("showMonth");
$(".dateMonthBox").removeClass("dateMonthBoxOpen");
$(".dateTitle").removeClass("dateTitleOpen");
$(".calendarBox").removeClass("calendarBoxOpen");
});
});
.calendarBox { /*This is when closed*/
width:14.28571428571428%;
border:0.5px solid #000;
height:100%;
transition-duration:1s;
}
.calendarBox:hover {
background-color:#8abcc2;
}
.calendarBoxOpen { /*This is when opened*/
width:57.14285714285712%;
}
.calendarDate {
}
.calendarHeader {
display:flex;
}
.dateTitle { /*This is when closed*/
margin-left:15px;
display:none;
transition:ease-in-out;
transition-duration:1s;
}
.dateTitleOpen { /*This is when opened*/
display:block;
}
.dateDayMonthBox {
width:100%;
}
.dateMonthBox { /*This is when closed*/
display:inline-flex;
float:right;
}
.dateMonthBoxOpen { /*This is when Opened*/
margin-left:25px;
}
.closeMonth { /*This is when closed*/
display:none;
}
.showMonth { /*This is when opened*/
display:block;
}
.dateDayBox { /*This is when closed*/
display:inline-flex;
float:left;/*This is when open*/
}
.dateDayBoxOpen { /*This is when opened*/
float:right;
}
.closeDay { /*This is when closed*/
display:none;
}
.showDay { /*This is when opened*/
display:block;
}
.dateCloseBtnBox { /*This is when date is closed*/
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
margin-left:25px;
margin-right:5px;
display:none;
}
.dateOpenBtnBox { /*This is visible, when date open*/
display:block;
}
.dateCloseBtn {
}
.closeHr { /*This is when closed*/
display:none;
}
.showHr { /*This is when opened*/
display:block;
}
/*====Content of the calendar day=====*/
.dateDayInformationBox {
}
.dateDayInformation {
width:100%;
display:inline-flex;
overflow-y:hidden;
}
.dayActivitiesInfo { /*This is when closed*/
height:18px;
width:100%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
.dayActivitiesInfoOpned { /*This is when opened*/
height:100%;
width:50%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
/*====The txt======*/
.dayInfoTitel_1May {
}
.dayInfoTxt_1May { /*This is when closed*/
display:none;
}
.dayInfoTxt_1MayOpen { /*This is when opened*/
display:block;
}
.dayInfoBtnBox_1Maj { /*This is when closed*/
display:none;
}
.dayInfoBtnBox_1MajOpen { /*This is when opened*/
text-align: center;
margin: auto;
display:block;
}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendarBox">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">1</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox">
<div class="dateCloseBtn">close</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------><div class="close">
close
</div>
<div class="calendarBox" onclick="animateDayOpen_1Maj">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">2</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox" onclick="animateDayClose_1Maj">
<div class="dateCloseBtn">X</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>

So, you have multiple boxes that you want to expand/shrink on click. You can give all that boxes one class - boxExpandable for expample, with initial width. Then user clicks on boxExpandable - you should toggle .expanded class with higher width.
If you want some content to be shown only when box is expanded - wrap it in .showWhenExpanded class, like shown below.
$(document).ready(function(){
$('.expandableBox').on('click', function(){
$(this).toggleClass('expanded');
});
});
.box {
margin-bottom: 10px;
padding: 15px;
width: 40%;
border: solid 5px goldenrod;
transition: background-color .4s, width .4s;
}
.box:hover {
background-color: #32cd32;
}
.box.expanded {
width: 80%;
}
.showWhenExpanded {
display: none;
}
.box.expanded .showWhenExpanded {
display: inline-block;
}
<script src="//code.jquery.com/jquery.js"></script>
<div class="content">
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
</div>
See this codepen

vertical tabs in bootstrap website

I'm trying to implement vertical tabs in my bootstrap website.
Here is the code:
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-5">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li><span class="glyphicon glyphicon-star"></span></li>
<li><span class="glyphicon glyphicon-headphones"></span></li>
<li><span class="glyphicon glyphicon-time"></span></li>
<li><span class="glyphicon glyphicon-calendar"></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Dezi <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Eli <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Mojo <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Healing <span class="badge pull-right">90%</span></h4>
</li>
<li class="list-group-item">
<h4>Exploring <span class="badge pull-right">78%</span></h4>
</li>
<li class="list-group-item">
<h4>QiGong <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span>
</h4></li>
</ul>
</div>
<div class="tab-pane" id="c">CCCCThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">DDDDDSecondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">EEEEEThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">FFFFFFThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
CSS
body {
background-color: #ddd;
}
h3 {
margin-top: 0;
}
.badge {
background-color: #777;
}
.tabs-left { margin-top: 3rem; }
.nav-tabs {
float: left;
border-bottom: 0;
li {
float: none;
margin: 0;
a {
margin-right: 0;
border: 0;
background-color: #333;
&:hover {
background-color: #444;
}
}
}
.glyphicon {
color: #fff;
}
.active .glyphicon {
color: #333;
}
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
border:0;
}
.tab-content {
margin-left: 45px;
.tab-pane {
display: none;
background-color: #fff;
padding: 1.6rem;
overflow-y: auto;
}
.active { display: block; }
}
.list-group {
width: 100%;
.list-group-item {
height: 50px;
h4, span {
line-height: 11px;
}
}
}
Javascript:
var tabsFn = (function() {
function init() {
setHeight();
}
function setHeight() {
var $tabPane = $('.tab-pane'),
tabsHeight = $('.nav-tabs').height();
$tabPane.css({
height: tabsHeight
});
}
$(init);
})();
Its implementation is as in this link.
But when I try it in my website, I get a weird result like this:
Why is it happening?

Owl carousel 2 using html files instead of img

I am using owl carousel 2 to create a simple sliding carousel. At the minute I am just using images however I would like to be able to use html files instead of . These html files have multiple divs in which images can be loaded into and instead of the whole image sliding away only the would change. Any suggestions as to how I could go about doing this?
Current HTML file:
<div id="carousel" class="owl-carousel">
<div class="item"><img src="Images/1.jpg" alt="img1" /></div>
<div class="item"><img src="Images/2.jpg" alt="img2" /></div>
<div class="item"><img src="Images/3.jpg" alt="img3" /></div>
<div class="item"><img src="Images/4.jpg" alt="img4" /></div>
</div>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/owl.carousel.js"></script>
<script src="Scripts/app.js"></script>

If you are Saying about HTML Elements . Then I have a solution for you.
So Let me tell u how to Create a Client Testimonials area with Owl Carousel and Bootstrap.
Make sure you have connected owl.carousel.css, owl.theme.default.min.css and owlcarousel.js.
HTML Code
<section id="clients-reviews" >
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="owl-client-reviews" class="owl-carousel owl-theme">
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
</div>
</div>
</div>
</div>
</section>
CSS goes like This
#clients-reviews .review p{
font-family: 'PT Serif Caption', serif;
color: #ffffff;
font-size: 18px;
}
#clients-reviews .review span.name{
color:#fed136;
}
#clients-reviews .review span.post{
font-family: 'PT Serif Caption', serif;
font-weight: 300;
font-size: 14px;
color: #fed136;
text-transform: none;
}
#clients-reviews .owl-theme .owl-controls .owl-nav [class*=owl-] {
background: transparent;
color: #ffffff;
bborder: 2px solid #fed136;
font-size: 14px;
padding: 0 10px;
line-height: 14px;
}
Your JS file will be
$("#owl-client-reviews").owlCarousel({
items:1,
loop:true,
autoplay:true,
autoHeight: false,
autoHeightClass: 'owl-height',
dots:false,
nav:true,
navText:[
"<i class='fa fa-angle-left fa-2x'></i>",
"<i class='fa fa-angle-right fa-2x'></i>"
]
});
Note*
I have used Fontawesome Icons for next and pre.
If you want increase the items then use the items property.
Thankss :)

Affix scrollspy to top using javascript

I'm trying to build a scrollspy similar to the one one the getboostrap website where the side navbar rises to the top of the page as you scroll, but then sticks to the top (http://getbootstrap.com/css/). I wrote a small script in my html to access the header size so that it would be compatible with different headers, but I want to move it into a separate javascript file. Here I'm including all of my html and the css for scrspy and affix.
HTML:
<div id="myScrollspy" role="complementary">
<script>
var element = document.getElementById('headerSize');
document.write('<ul class="nav scrspy affix" data-spy="affix" data-offset-top="' + element.offsetHeight + '" data-offset-bottom="200">');
</script>
<ul class="nav scrspy affix" data-spy="affix">
<li class="active">Section One</li>
<ul class="nav scrspy">
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>Section Two</li>
<li>Section Three</li>
<li>Section Four</li>
<li>Section Five</li>
</ul>
</div>
<section>
<h2 id="section-1">Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<h2 id="section-1-1">Section 1.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.
<h2 id="section-1-2">Section 1.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.
<h2 id="section-2">Section Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<h2 id="section-3">Section Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<h2 id="section-4">Section Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<h2 id="section-5">Section Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
</section>
CSS:
.scrspy {
> li {
float: left;
> a {
color: #gray-dark;
&:hover {
border-right: 2px solid #blue;
}
}
}
.nav-stacked;
.hidden-xs;
.hidden-sm;
}
ul.scrspy, ul.scrspy ul li {
width: 9.75rem;
}
ul.scrspy.affix {
top: 1.85rem;
}
ul.scrspy ul li {
padding: .315rem .47rem;
padding-left: 1rem;
font-size: #font-size-small;
}
ul.scrspy li.active a, ul.scrspy li.active a:hover {
color: #daimler-blue;
border-right: 2px solid #blue;
}
.affix {
position: fixed;
}
ul.scrspy.affix {
position: fixed;
top: 0;
z-index: 10;
}
I tried this in a separate .js file with a link to it in the html but it doesn't seem to work.
JS:
$(document).ready(function () {
var element = document.getElementById('headerSize');
$('ul.scrspy').affix({
offset: {
top: element.offsetHeight
bottom: 200
}
});
});

Note the css apart from .sticky-top-affix is for the demo.
Also note data-top-add="20" should be whatever top you set in that class to make it smooth. It is option - try not having it and see what happens.
.sticky-top-affix {
position: fixed;
top: 20px;
}
body {
height: 2000px;
}
nav {
border: 1px solid black;
width: 250px;
}
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<nav class="sticky-top" data-top-add="20">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
var $stickyEls;
function onWindowScroll() {
var scrollTop = $(window).scrollTop();
$stickyEls.each(function() {
var $el = $(this),
topOffset = $el.data('topOffset');
$el[scrollTop >= topOffset ?
'addClass' : 'removeClass']('sticky-top-affix');
});
}
function stickyTopInit() {
$stickyEls = $('.sticky-top');
// Save positions.
$stickyEls.each(function() {
var $el = $(this);
var addToTop = +$el.attr('data-top-add') || 0;
$el.data('topOffset', $el.offset().top - addToTop);
});
$(window).scroll(onWindowScroll);
}
$(document).ready(stickyTopInit);
Fiddle: http://jsfiddle.net/y3umh/
All we are doing here is saying "When you scroll passed the top of the menu add the sticky-top-affix, if you scroll before it remove it".

I added
<ul class="nav scrspy affix" id="stay" data-spy="affix">
to the html, and changed the javascript to:
$(document).ready(function () {
var element = document.getElementById('headerSize');
$("#stay").affix({
offset: {
top: element.offsetHeight
}
});
});