jQuery show content when clicked hide initially - javascript

I am using a simple jQuery function to show / change a divs content depending on which link is clicked..
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
jQuery('#div' + jQuery(this).data('target')).show();
});
});
.col-md-4{width:200px;background:red;clear:both;margin-bottom:10px;}
.p_content{clear:both;margin-top:300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="2">
Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="3">
suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris
</a>
</div>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="4">
ique sodales mi mi quis leo. Aliquam at eros vitae sem accumsan maximus. In non sapien faucibus, accumsan nisl eget, convallis
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="5">
vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus.
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="6">
fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis
</a>
</div>
<div class="container p_content">
<div id="div1" class="targetDiv">
posuere dapibus. In blandit, tortor quis laoreet lobortis, sem est auctor eros, ut vulputate augue felis nec massa. Pellentesque sagittis mi ac leo dignissim, sed semper augue hendrerit. Quisque scelerisque ante quis ullamcorper placerat. Cras in porta turpis. Proin turpis mi, posuere vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit am
</div>
<div id="div2" class="targetDiv">
idunt ante, eget pulvinar magna malesuada id. Morbi posuere libero sed ante tempor faucibus. Fusce non nulla nunc. Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et
</div>
<div id="div3" class="targetDiv">
erisque erat vel vehicula. In varius at massa id molestie. Donec nec nisi vel justo auctor laoreet. Ut commodo velit vitae magna faucibus elementum. Cras ultrices auctor risus, scelerisque aliquet nisi tincidunt id. Integer quis dapibus nibh. Praesent mauris eros, vestibulum at felis a, luctus laoreet tellus.
</div>
<div id="div4" class="targetDiv">
e vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit amet sodales urna
</div>
<div id="div5" class="targetDiv">
gnissim ultrices tellus in convallis. Sed euismod tellus vel lorem suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris. Aenean quis maximus ex. Maecenas congue tellus ac nunc sodales pellentesque.
</div>
<div id="div6" class="targetDiv">
Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis nisi id cursus. Nunc ac turpis sem. In pellentesque rhoncus suscipit.
</div>
</div>
http://jsfiddle.net/W4Km8/7939/
It all works correctly apart from two things:
When it first loads it displays all of the content until one of the options is clicked.
I would like to make it so that when one of the links is clicked the page jumps down to where the content it.
Could anybody point me in the right direction for achieving these two things?


You just need to hide those elements using display:none; in the css.
My solution is to add a hash to the URL and let the browser take care about the scrolling.
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
var selector = '#div' + jQuery(this).data('target');
jQuery(selector).show();
location.hash = selector;
});
});
.col-md-4{width:200px;background:red;clear:both;margin-bottom:10px;}
.p_content{clear:both;margin-top:300px;}
/* add this */
.targetDiv {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="2">
Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="3">
suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris
</a>
</div>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="4">
ique sodales mi mi quis leo. Aliquam at eros vitae sem accumsan maximus. In non sapien faucibus, accumsan nisl eget, convallis
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="5">
vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus.
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="6">
fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis
</a>
</div>
<div class="container p_content">
<div id="div1" class="targetDiv">
posuere dapibus. In blandit, tortor quis laoreet lobortis, sem est auctor eros, ut vulputate augue felis nec massa. Pellentesque sagittis mi ac leo dignissim, sed semper augue hendrerit. Quisque scelerisque ante quis ullamcorper placerat. Cras in porta turpis. Proin turpis mi, posuere vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit am
</div>
<div id="div2" class="targetDiv">
idunt ante, eget pulvinar magna malesuada id. Morbi posuere libero sed ante tempor faucibus. Fusce non nulla nunc. Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et
</div>
<div id="div3" class="targetDiv">
erisque erat vel vehicula. In varius at massa id molestie. Donec nec nisi vel justo auctor laoreet. Ut commodo velit vitae magna faucibus elementum. Cras ultrices auctor risus, scelerisque aliquet nisi tincidunt id. Integer quis dapibus nibh. Praesent mauris eros, vestibulum at felis a, luctus laoreet tellus.
</div>
<div id="div4" class="targetDiv">
e vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit amet sodales urna
</div>
<div id="div5" class="targetDiv">
gnissim ultrices tellus in convallis. Sed euismod tellus vel lorem suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris. Aenean quis maximus ex. Maecenas congue tellus ac nunc sodales pellentesque.
</div>
<div id="div6" class="targetDiv">
Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis nisi id cursus. Nunc ac turpis sem. In pellentesque rhoncus suscipit.
</div>
</div>


You can just hide all the elements by class name using jquery on page load, or you can just use css
display:none;

Related

Changing position with css avoiding flexbox and javascript (append, insertAfter)

I'm building a template and I want to move an element avoiding flexbox if it is possible, using pure css.
Here's my problem:
<div class="container-fluid health-details">
<div class="row">
<?php include 'sidebar.php';?>
<div class="col-md-8">
<div class="information">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque magna, volutpat ut scelerisque gravida, posuere nec diam. Fusce et ligula eget nisi malesuada dictum. Nunc et purus massa. </p>
<p>Curabitur vel fermentum nisi. Aenean elementum vel erat sit amet viverra. Ut quis sapien at dolor sollicitudin ullamcorper. Aliquam quis volutpat nisl, nec cursus tortor. Proin elementum magna nec erat ultricies, eu feugiat nunc convallis. Sed dapibus nec eros in porttitor. In finibus sed dolor vel ornare. </p>
<p>Aenean volutpat iaculis ullamcorper. Integer id nisi fringilla, feugiat est quis, hendrerit felis. Aliquam nunc justo, feugiat quis ligula ac, rhoncus pellentesque sapien. Pellentesque gravida dui elit, at egestas libero suscipit quis. Sed consectetur, tellus in faucibus rhoncus, nisl ipsum pulvinar magna, posuere pulvinar nulla urna a nisl. Quisque cursus ac metus et venenatis. </p>
<p>Pellentesque vehicula ornare quam, id tempus felis volutpat quis. Proin volutpat massa ac turpis dignissim, id consectetur eros sagittis. Pellentesque in interdum turpis. Maecenas eget nisi sit amet nisi pretium placerat. Maecenas luctus vel leo ut fermentum. Nullam ullamcorper ultrices scelerisque. Cras semper eros vitae nisi vulputate euismod. Suspendisse potenti. Etiam urna sem, vulputate in hendrerit a, imperdiet at ipsum. Integer aliquet arcu erat, interdum consectetur enim condimentum sed.</p>
<p>Integer egestas dolor eu sagittis pharetra. Phasellus non commodo magna. Maecenas sit amet libero pellentesque arcu posuere ultrices ut non augue. Donec aliquam pellentesque lectus, vel sollicitudin nisi viverra at. Fusce convallis velit eget urna ullamcorper finibus. Suspendisse potenti. Quisque ac eros vel ligula vulputate aliquet vestibulum sit amet nisl. Nunc rutrum blandit consectetur. Pellentesque vel rhoncus eros. Nam non vestibulum ex, sed cursus sem. Suspendisse ut porttitor erat, nec placerat ligula. Cras consequat ut ligula posuere interdum. Phasellus porta, nisi quis pharetra fringilla, nulla sem convallis sapien, ut faucibus ipsum mauris nec nibh. Maecenas efficitur hendrerit eros, vel vulputate nisi convallis nec. Aliquam pulvinar scelerisque mi, et placerat nisi egestas eget.</p>
</div>
</div>
</div>
</div>
My sidebar is really easy, something like:
<aside>
<nav>
<ul>
<li class="active">Ciao</li>
<li>Ciao Program</li>
<li>Program Outline</li>
<li>Tuition & Fees Guide</li>
<li>Admission Policy</li>
</ul>
</nav>
</aside>
What I'd like to do is, on mobile switch the position of the sidebar and put it within the blurb:
<div class="container-fluid health-details">
<div class="row">
<div class="col-md-8">
<div class="information">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque magna, volutpat ut scelerisque gravida, posuere nec diam. Fusce et ligula eget nisi malesuada dictum. Nunc et purus massa. </p>
<p>Curabitur vel fermentum nisi. Aenean elementum vel erat sit amet viverra. Ut quis sapien at dolor sollicitudin ullamcorper. Aliquam quis volutpat nisl, nec cursus tortor. Proin elementum magna nec erat ultricies, eu feugiat nunc convallis. Sed dapibus nec eros in porttitor. In finibus sed dolor vel ornare. </p>
<?php include 'sidebar.php';?>
<p>Aenean volutpat iaculis ullamcorper. Integer id nisi fringilla, feugiat est quis, hendrerit felis. Aliquam nunc justo, feugiat quis ligula ac, rhoncus pellentesque sapien. Pellentesque gravida dui elit, at egestas libero suscipit quis. Sed consectetur, tellus in faucibus rhoncus, nisl ipsum pulvinar magna, posuere pulvinar nulla urna a nisl. Quisque cursus ac metus et venenatis. </p>
<p>Pellentesque vehicula ornare quam, id tempus felis volutpat quis. Proin volutpat massa ac turpis dignissim, id consectetur eros sagittis. Pellentesque in interdum turpis. Maecenas eget nisi sit amet nisi pretium placerat. Maecenas luctus vel leo ut fermentum. Nullam ullamcorper ultrices scelerisque. Cras semper eros vitae nisi vulputate euismod. Suspendisse potenti. Etiam urna sem, vulputate in hendrerit a, imperdiet at ipsum. Integer aliquet arcu erat, interdum consectetur enim condimentum sed.</p>
<p>Integer egestas dolor eu sagittis pharetra. Phasellus non commodo magna. Maecenas sit amet libero pellentesque arcu posuere ultrices ut non augue. Donec aliquam pellentesque lectus, vel sollicitudin nisi viverra at. Fusce convallis velit eget urna ullamcorper finibus. Suspendisse potenti. Quisque ac eros vel ligula vulputate aliquet vestibulum sit amet nisl. Nunc rutrum blandit consectetur. Pellentesque vel rhoncus eros. Nam non vestibulum ex, sed cursus sem. Suspendisse ut porttitor erat, nec placerat ligula. Cras consequat ut ligula posuere interdum. Phasellus porta, nisi quis pharetra fringilla, nulla sem convallis sapien, ut faucibus ipsum mauris nec nibh. Maecenas efficitur hendrerit eros, vel vulputate nisi convallis nec. Aliquam pulvinar scelerisque mi, et placerat nisi egestas eget.</p>
</div>
</div>
</div>
</div>
I don't have to necessarily use php to do the trick, I can do it with simple html. The thing is that I want to avoid to use flexbox, I would be nice if I can only add a class to my sidebar with php. The other thing that I have to avoid is to repeat myself (DRY). Of course I can create the same bar and display:none and block on mobile (so I will have the same two sidebars), but if it is possible I'd rather avoid it.
Is there any solution to solve my problem?
I would avoid to use a script to, like something with javascript (append the element based on the size of the viewport, that's the only method that I know that it will work for sure, something like):
$('.sidebar').insertAfter( '.information p:last-child' );
I mean, it will work just fine but I don't love to style with javascript.
Thanks

Bootstrap Navbar Logo & Menu CSS classes change after scroll

How can I change Navbar-Brand Image and Menu class in Bootstrap 3 after scrolling?
My js skills are too low atm and I don't know how to change after scroll my logo__web__light.png to logo__web__dark.png and navbar menu class also.
Thank you in advance!
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.sticky-navbar').addClass('sticky');
} else {
$('.sticky-navbar').removeClass('sticky');
}
});
.sticky-navbar {
background-color: rgba(0, 0, 0, 0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
background-color: rgba(0, 0, 0, 0.46);
height: 105px;
transition: background-color .5s ease 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<body>
<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
<div class="container-fluid custom-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#"><img src="assets/images/logo__web__light.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right custom-pull">
<li class="active">Home</li>
<li>Work</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<section class="demo">
<div class="container">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.
Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.
Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.
In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.
Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.
Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

You can add second logo which should appear when navbar have .sticky class and hide/show images according to that class
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.sticky-navbar').addClass('sticky');
} else {
$('.sticky-navbar').removeClass('sticky');
}
});
.sticky-navbar {
background-color: rgba(0, 0, 0, 0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
background-color: rgba(0, 0, 0, 0.46);
height: 105px;
transition: background-color .5s ease 0s;
}
.sticky-navbar .sticky-logo,
.sticky-navbar.sticky .main-logo
{
display: none;
}
.sticky-navbar.sticky .sticky-logo{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<body>
<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
<div class="container-fluid custom-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand main-logo" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 1</a>
<a class="navbar-brand sticky-logo" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 2</a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right custom-pull">
<li class="active">Home</li>
<li>Work</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<section class="demo">
<div class="container">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.
Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.
Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.
In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.
Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.
Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

Because the scroll event fires more time you can change your code to:
$(window).scroll(function() {
var scrolltop = $(this).scrollTop();
var sticky = $('.sticky-navbar.sticky').length;
if (scrolltop > 50 && sticky == 0) {
$('.sticky-navbar').addClass('sticky')
.find('.navbar-brand img').attr('src', 'logo__web__dark.png');
return;
}
if (scrolltop <= 50 && sticky != 0) {
$('.sticky-navbar').removeClass('sticky')
.find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png');
}
});
In this way you will toggle the class and image source only one time per condition:
scrolltop > 50
$(window).scroll(function() {
var scrolltop = $(this).scrollTop();
var sticky = $('.sticky-navbar.sticky').length;
if (scrolltop > 50 && sticky == 0) {
$('.sticky-navbar').addClass('sticky')
.find('.navbar-brand img').attr('src', 'logo__web__dark.png');
console.log('changed on > 50');
return;
}
if (scrolltop <= 50 && sticky != 0) {
$('.sticky-navbar').removeClass('sticky')
.find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png');
console.log('changed on <= 50');
}
});
.sticky-navbar {
background-color: rgba(0, 0, 0, 0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
background-color: rgba(0, 0, 0, 0.46);
height: 105px;
transition: background-color .5s ease 0s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
<div class="container-fluid custom-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#"><img src="assets/images/logo__web__light.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right custom-pull">
<li class="active">Home</li>
<li>Work</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<section class="demo">
<div class="container">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.
Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.
Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.
In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.
Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.
Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
</div>
</div>
</section>

Close other opened divs when current divs is opened (jQuery)

I got a couple of elements that shows a div when clicked on it. The only problem is when you click them all, all divs are opened instead of just the one that was clicked.
My jquery:
<script>
$(document).ready(function() {
$('.servicemark').click(function() {
console.log($(this).attr('data-toggle'));
var type = $(this).attr('data-toggle');
$('.'+type).slideToggle("slide");
});
});
</script>
My html/php:
<section class="def-section home-services">
<div class="container">
<div class="row">
<?php
foreach($blocks as $block) {
$images = json_decode($block->images);
echo '
<!-- === SERVICE ITEM === -->
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 servicemark" data-toggle="'.$block->alias.'" style="cursor:pointer;">
<div class="service-mark-border-top"></div>
<div class="service-mark-border-right"></div>
<div class="service-mark-border-bottom"></div>
<div class="service-mark-border-left"></div>
<div class="service">
<div class="service-icon">
<img src="cms/'.$images->image_intro.'" />
</div>
<h3>'.$block->title.'</h3>
<div class="service-text">
<p>'.$block->introtext.'</p>
</div>
</div>
</div>
';
}
?>
<div class="row zee-container-vervoer" style="display:none;">
<div class="text">
<p>Zee container vervoer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row gevoelige-lading" style="display:none;">
<div class="text">
<p>Speciale lading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row temperatuur-gevoelige-lading" style="display:none;">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row explosieve-lading" style="display:none;">
<div class="text">
<p>Gevaarlijke stoffen Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
</div>
</section>
Everything is now filtered by the alias of the correct element (class name is the same as the alias). How can I close all other elements except for the one that is currently opened?

Try this (based and thanks to Juan C. comment):
$('.' + type).slideToggle("slide").siblings(".row").hide();

Try this :
$(document).ready(function() {
$('.servicemark').click(function() {
console.log($(this).attr('data-toggle'));
$(".servicemark").slideUp();
$(this).slideDown();
})
})

bootstrap affix does not behave in Safari same as in other browsers

The nav sticky at the top of the page without scrolling.
It happens only in Safari browser.
Demo http://codepen.io/anon/pen/PGqxKa
$("#myNav").affix({
offset: {
top: 0
}
});
.jumbotron {
margin-bottom: 0;
}
.navbar {
border-radius: 0;
}
.navbar.affix {
top: 0;
z-index: 9999;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div data-spy="scroll" data-target="#myNav">
<div class="header">
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Bootstrap Affix</h1>
</div>
</div>
</div>
</div>
</div>
<nav id="myNav" class="navbar navbar-inverse" data-spy="affix">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Section One
</li>
<li>Section Two
</li>
<li>Section Three
</li>
<li>Section Four
</li>
<li>Section Five
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<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. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet
quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id="section-2">Section Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis
enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis
urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit
non sapien in, mollis ornare augue.</p>
<hr>
<h2 id="section-3">Section Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut
sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit
dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar
purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem
elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
<hr>
<h2 id="section-4">Section Four</h2>
<p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida,
faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus
sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut
sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus fermentum, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum
purus, sit amet tristique purus purus nec felis. Morbi vestibulum sapien eget porta pulvinar. Nam at quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis in orci. Quisque vestibulum
sem nisl, vel congue leo dictum nec. Cras eget est at velit sagittis ullamcorper vel et lectus. In hac habitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam,
lorem libero hendrerit urna, faucibus rhoncus massa nibh at felis. Curabitur ac tempus nulla, ut semper erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id.</p>
<p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt.
Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
<p>Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet,
quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus convallis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa.</p>
<hr>
<h2 id="section-5">Section Five</h2>
<p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu
non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
<p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas
ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis
ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p>
<p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida,
faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus
sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
<p>Morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt
vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque
vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p>
<p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt.
Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
</div>
</div>
</div>
</div>

Add Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) { to the affix.js
Affix.prototype.getState = function(scrollHeight, height, offsetTop, offsetBottom) {
var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
var targetHeight = this.$target.height()
// added line 👇
if (scrollTop < 0) {
return 'bottom';
}
------------------------------------------
------------------------------
------------------
}

fixed positioned div should become visible at top header location after user scroll reach form below in page

my program includes a hidden fixed positioned div which should become visible at top header location when user scrolls reached a form which is between the page and after that fixed positioned div should remain at top header location till the page end.error in my code:- fixed div is always visible. looking for the solution.
$(document).ready(function(){
$('.now-show').hide();
if ($('.now').is(":visible") == true) {
$('.now-show').show();
}
});
<div style="height:50px;background:green;width:100%;">header</div>
<div style="padding-bottom:2000px;">form is below</div>
<div style="background:orange;height:50px;">
<form>
I am form
<input type="" size="0" style="border:none;border-bottom:1px solid white;background:orange;" placeholder="email" >
<input type="" size="0" style="border:none;border-bottom:1px solid white;background:orange;" placeholder="phone" >
<input type="" size="0" style="border:none;border-bottom:1px solid white;background:orange;" placeholder="name" >
</form>
</div>
<div class="now" style="margin-top:150px;">
NOW fixed positioned div should become visible at top header position
</div>
<div class="now-show" style="position:fixed;background:black;height:50px;top:0;bottom:0;color:white;width:100%;">
i will behave as sticky fixed position div at top header when you reach the form below<br><br><br>
</div>
<div style="padding-top:2000px;">sticky div is still there at top</div>

You need to add up classes on scrolling down and remove the class on scrolling up
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');
}
}
demonstration

You need to use this condition:
$(".now").offset().top == $(window).scrollTop()
And you have the working snippet here:
$(document).ready(function(){
$('.now-show').hide();
$(window).scroll(function () {
if ($(".now").offset().top < $(window).scrollTop())
$('.now-show').show();
else
$('.now-show').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="height:50px;background:green;width:100%;">header</div>
<div style="padding-bottom:2000px;">form is below</div>
<div style="background:orange;height:50px;">
<form>
I am form
<input type="" size="0" style="border:none;border-bottom:1px solid white;background:orange;" placeholder="email" >
<input type="" size="0" style="border:none;border-bottom:1px solid white;background:orange;" placeholder="phone" >
<input type="" size="0" style="border:none;border-bottom:1px solid white;background:orange;" placeholder="name" >
</form>
</div>
<div class="now" style="margin-top:150px;">
NOW fixed positioned div should become visible at top header position
</div>
<div class="now-show" style="position:fixed;background:black;height:50px;top:0;bottom:0;color:white;width:100%;">
i will behave as sticky fixed position div at top header when you reach the form below<br><br><br>
</div>
<div style="padding-top:2000px;">sticky div is still there at top</div>

You are using :visible selector: that isn't right, as your form isn't hidden, but just placed lower on the page.
You need to use scroll jQuery API with a condition, whether you your form is above the bottom edge of the window.
DEMO
$(document).ready(function () {
$(window).scroll(function () {
if (($(window).scrollTop() + $(window).height()) > $('form').offset().top) {
$('.hiddenHeader').show();
} else {
$('.hiddenHeader').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="margin: 0; padding: 0;">
<div style="height: 50px; background: green; width: 100%;">header</div>
<div class="hiddenHeader" style="display: none; height: 50px; position: fixed; background: black; top: 0; color: white; width:100%; overflow: hidden;">i will behave as sticky fixed position div at top header when you reach the form below</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta risus quam, vel pretium lectus auctor ullamcorper. Suspendisse auctor leo nec orci semper commodo. Vestibulum semper erat et efficitur bibendum. In nulla diam, luctus quis magna et, gravida iaculis ligula. Integer nec commodo arcu. Fusce maximus libero vitae diam egestas, id tempus sem suscipit. Suspendisse dictum lectus metus, ac feugiat velit porttitor quis. Nulla non ultrices nulla. Pellentesque porta nibh sed facilisis laoreet.</p>
<p>Aliquam sit amet euismod orci, sit amet porttitor ligula. Nunc pulvinar laoreet imperdiet. Mauris condimentum sagittis diam eget bibendum. Sed vestibulum ipsum sit amet enim faucibus, eget aliquet eros sollicitudin. Praesent at tellus et leo viverra volutpat. Praesent suscipit risus sed nisl maximus maximus. Fusce lacinia feugiat ipsum sed ornare. Nullam vestibulum mauris quis est molestie, vitae porta ligula placerat. Donec auctor sed ante ac ornare. Duis non lacus accumsan, pharetra dui non, bibendum quam. Nunc volutpat sollicitudin odio id tristique. Cras nec aliquet ipsum. Etiam gravida mauris vel laoreet hendrerit. Fusce at sapien tempus, faucibus purus non, placerat justo. Maecenas vitae cursus lectus.</p>
<p>Suspendisse euismod, ipsum sed hendrerit convallis, ligula elit semper velit, sed malesuada mauris dui eu ipsum. Ut volutpat massa ut elit viverra lacinia. Sed consectetur enim laoreet blandit convallis. Donec feugiat vitae ex at hendrerit. Vestibulum auctor nulla blandit turpis congue vulputate. Ut condimentum egestas purus a ultrices. Sed tortor tortor, convallis in risus ut, porttitor elementum diam. Praesent eu semper augue. Vestibulum dignissim mi felis, vitae eleifend arcu sollicitudin eu.</p>
<p>Praesent ac nibh imperdiet, convallis magna vitae, eleifend orci. Donec malesuada quam quis maximus eleifend. Vestibulum euismod, elit id mattis scelerisque, dolor tellus eleifend eros, in convallis felis est sit amet erat. Donec consequat libero vel ipsum imperdiet, finibus pharetra urna sagittis. Etiam pellentesque quam vitae mi scelerisque, eu feugiat urna finibus. Aenean id blandit magna. Duis vehicula, ante sed malesuada efficitur, neque eros pretium felis, eu ultricies mauris mi sed ante. Suspendisse et dolor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed vulputate velit, quis condimentum magna. Aenean consectetur tincidunt lobortis. Aenean malesuada elementum nisl non sollicitudin. Morbi ullamcorper a dolor vel dapibus.</p>
<p>Mauris vel ligula id mauris imperdiet euismod sit amet ac sapien. Donec eget tempus ligula. Vestibulum ut nisl volutpat, vulputate arcu nec, elementum nulla. Mauris commodo interdum velit in vulputate. Ut faucibus condimentum posuere. Sed porta id ex non pretium. Aenean est dui, feugiat at leo in, finibus elementum ante. Suspendisse non condimentum lectus. Suspendisse potenti. Ut at ex blandit risus aliquet elementum aliquam vel nibh. Suspendisse potenti. Praesent aliquam est vitae odio euismod feugiat. Curabitur gravida eget arcu id interdum.</p>
<form style="background :orange; height: 50px;">I am form</form>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta risus quam, vel pretium lectus auctor ullamcorper. Suspendisse auctor leo nec orci semper commodo. Vestibulum semper erat et efficitur bibendum. In nulla diam, luctus quis magna et, gravida iaculis ligula. Integer nec commodo arcu. Fusce maximus libero vitae diam egestas, id tempus sem suscipit. Suspendisse dictum lectus metus, ac feugiat velit porttitor quis. Nulla non ultrices nulla. Pellentesque porta nibh sed facilisis laoreet.</p>
<p>Aliquam sit amet euismod orci, sit amet porttitor ligula. Nunc pulvinar laoreet imperdiet. Mauris condimentum sagittis diam eget bibendum. Sed vestibulum ipsum sit amet enim faucibus, eget aliquet eros sollicitudin. Praesent at tellus et leo viverra volutpat. Praesent suscipit risus sed nisl maximus maximus. Fusce lacinia feugiat ipsum sed ornare. Nullam vestibulum mauris quis est molestie, vitae porta ligula placerat. Donec auctor sed ante ac ornare. Duis non lacus accumsan, pharetra dui non, bibendum quam. Nunc volutpat sollicitudin odio id tristique. Cras nec aliquet ipsum. Etiam gravida mauris vel laoreet hendrerit. Fusce at sapien tempus, faucibus purus non, placerat justo. Maecenas vitae cursus lectus.</p>
<p>Suspendisse euismod, ipsum sed hendrerit convallis, ligula elit semper velit, sed malesuada mauris dui eu ipsum. Ut volutpat massa ut elit viverra lacinia. Sed consectetur enim laoreet blandit convallis. Donec feugiat vitae ex at hendrerit. Vestibulum auctor nulla blandit turpis congue vulputate. Ut condimentum egestas purus a ultrices. Sed tortor tortor, convallis in risus ut, porttitor elementum diam. Praesent eu semper augue. Vestibulum dignissim mi felis, vitae eleifend arcu sollicitudin eu.</p>
<p>Praesent ac nibh imperdiet, convallis magna vitae, eleifend orci. Donec malesuada quam quis maximus eleifend. Vestibulum euismod, elit id mattis scelerisque, dolor tellus eleifend eros, in convallis felis est sit amet erat. Donec consequat libero vel ipsum imperdiet, finibus pharetra urna sagittis. Etiam pellentesque quam vitae mi scelerisque, eu feugiat urna finibus. Aenean id blandit magna. Duis vehicula, ante sed malesuada efficitur, neque eros pretium felis, eu ultricies mauris mi sed ante. Suspendisse et dolor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed vulputate velit, quis condimentum magna. Aenean consectetur tincidunt lobortis. Aenean malesuada elementum nisl non sollicitudin. Morbi ullamcorper a dolor vel dapibus.</p>
<p>Mauris vel ligula id mauris imperdiet euismod sit amet ac sapien. Donec eget tempus ligula. Vestibulum ut nisl volutpat, vulputate arcu nec, elementum nulla. Mauris commodo interdum velit in vulputate. Ut faucibus condimentum posuere. Sed porta id ex non pretium. Aenean est dui, feugiat at leo in, finibus elementum ante. Suspendisse non condimentum lectus. Suspendisse potenti. Ut at ex blandit risus aliquet elementum aliquam vel nibh. Suspendisse potenti. Praesent aliquam est vitae odio euismod feugiat. Curabitur gravida eget arcu id interdum.</p>
</body>
*** This is a basic example. If you want, you could add animations and transitions.

Categories