rdd.ro/nunta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added js-scroll-trigger class to prevent conflicts with scrollable links and other components

Browse Source
This commit is contained in:
David Miller 2017-08-19 17:01:59 -04:00
parent f130d4b295
commit ccdcb57b8a
4 changed files with 47 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@ -30,7 +30,7 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#page-top">Start Bootstrap</a> <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu Menu
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
@ -38,19 +38,19 @@
<div class="collapse navbar-collapse" id="navbarResponsive"> <div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#services">Services</a> <a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a> <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#about">About</a> <a class="nav-link js-scroll-trigger" href="#about">About</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#team">Team</a> <a class="nav-link js-scroll-trigger" href="#team">Team</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#contact">Contact</a> <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -63,11 +63,29 @@
<div class="intro-text"> <div class="intro-text">
<div class="intro-lead-in">Welcome To Our Studio!</div> <div class="intro-lead-in">Welcome To Our Studio!</div>
<div class="intro-heading">It's Nice To Meet You</div> <div class="intro-heading">It's Nice To Meet You</div>
<a href="#services" class="btn btn-xl">Tell Me More</a> <a class="btn btn-xl js-scroll-trigger" href="#services">Tell Me More</a>
</div> </div>
</div> </div>
</header> </header>
<section>
<div class="container">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</section>
<!-- Services --> <!-- Services -->
<section id="services"> <section id="services">
<div class="container"> <div class="container">
@ -117,84 +135,84 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-link" data-toggle="modal" href="#portfolioModal1"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover"> <div class="portfolio-hover">
<div class="portfolio-hover-content"> <div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i> <i class="fa fa-plus fa-3x"></i>
</div> </div>
</div> </div>
<img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt=""> <img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt="">
</div> </a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Threads</h4> <h4>Threads</h4>
<p class="text-muted">Illustration</p> <p class="text-muted">Illustration</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-link" data-toggle="modal" href="#portfolioModal2"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover"> <div class="portfolio-hover">
<div class="portfolio-hover-content"> <div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i> <i class="fa fa-plus fa-3x"></i>
</div> </div>
</div> </div>
<img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt=""> <img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt="">
</div> </a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Explore</h4> <h4>Explore</h4>
<p class="text-muted">Graphic Design</p> <p class="text-muted">Graphic Design</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-link" data-toggle="modal" href="#portfolioModal3"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover"> <div class="portfolio-hover">
<div class="portfolio-hover-content"> <div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i> <i class="fa fa-plus fa-3x"></i>
</div> </div>
</div> </div>
<img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt=""> <img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt="">
</div> </a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Finish</h4> <h4>Finish</h4>
<p class="text-muted">Identity</p> <p class="text-muted">Identity</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-link" data-toggle="modal" href="#portfolioModal4"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover"> <div class="portfolio-hover">
<div class="portfolio-hover-content"> <div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i> <i class="fa fa-plus fa-3x"></i>
</div> </div>
</div> </div>
<img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt=""> <img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt="">
</div> </a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Lines</h4> <h4>Lines</h4>
<p class="text-muted">Branding</p> <p class="text-muted">Branding</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-link" data-toggle="modal" href="#portfolioModal5"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover"> <div class="portfolio-hover">
<div class="portfolio-hover-content"> <div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i> <i class="fa fa-plus fa-3x"></i>
</div> </div>
</div> </div>
<img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt=""> <img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt="">
</div> </a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Southwest</h4> <h4>Southwest</h4>
<p class="text-muted">Website Design</p> <p class="text-muted">Website Design</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-link" data-toggle="modal" href="#portfolioModal6"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover"> <div class="portfolio-hover">
<div class="portfolio-hover-content"> <div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i> <i class="fa fa-plus fa-3x"></i>
</div> </div>
</div> </div>
<img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt=""> <img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt="">
</div> </a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Window</h4> <h4>Window</h4>
<p class="text-muted">Photography</p> <p class="text-muted">Photography</p>

12
js/agency.js
View File

@ -2,7 +2,7 @@
"use strict"; // Start of use strict "use strict"; // Start of use strict
// Smooth scrolling using jQuery easing // Smooth scrolling using jQuery easing
$('a[href*="#"]:not([href="#"])').click(function() { $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash); var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
@ -15,17 +15,17 @@
} }
}); });
// Closes responsive menu when a scroll trigger link is clicked
$('.navbar .js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll // Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({ $('body').scrollspy({
target: '#mainNav', target: '#mainNav',
offset: 54 offset: 54
}); });
// Closes responsive menu when a link is clicked
$('.navbar-collapse>ul>li>a').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Collapse the navbar when page is scrolled // Collapse the navbar when page is scrolled
$(window).scroll(function() { $(window).scroll(function() {
if ($("#mainNav").offset().top > 100) { if ($("#mainNav").offset().top > 100) {

2
js/agency.min.js vendored
View File

@ -3,4 +3,4 @@
* Copyright 2013-2017 Start Bootstrap * Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE) * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
*/ */
!function(a){"use strict";a('a[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var n=a(this.hash);if((n=n.length?n:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:n.offset().top-54},1e3,"easeInOutExpo"),!1}}),a("body").scrollspy({target:"#mainNav",offset:54}),a(".navbar-collapse>ul>li>a").click(function(){a(".navbar-collapse").collapse("hide")}),a(window).scroll(function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")})}(jQuery); !function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var e=a(this.hash);if((e=e.length?e:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:e.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".navbar .js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54}),a(window).scroll(function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")})}(jQuery);