so I have a sticky header on a website project that is using single page layout as expected. Just because my header is quite big because of the logo, whenever I scroll it covers the headers of each section. I was wondering is it a way to offset the margin whenever a link is clicked on scroll with like margin-top: 150px;. I also have a content that is using absolute position and I want to specify another selector that is only scrolling on fixed with for a specific page-section. I hope that makes sense, I will post a part of the html and jquery code that I have so far:
HTML:
<header>
<div class="container-fluid example5">
<nav class="navbar navbar-default navigation1">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li>
<li>ABOUT</li>
<li>SERVICES</li>
<li><a class="red scroll-link" data-id="hot-offers" href=".hot-offers">HOT OFFERS</a></li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!-- content -->
<div id="#carousel-example" class="page-section">
<h1>Header</h1>
<p>CONTENT....</p>
</div>
<div id="about" class="page-section"><h2>Header</h2>
<p>CONTENT....</p></div>
<div id=".services" class="page-section"><h3>Header</h3>
<p>CONTENT....</p></div>
jQuery:
$('a').click(function (e) {
e.preventDefault();
var curLink = $(this);
var scrollPoint = $(curLink.attr('href')).position().top;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
})
$(window).scroll(function () {
onScrollHandle();
});
function onScrollHandle() {
//Navbar shrink when scroll down
$(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50);
//Get current scroll position
var currentScrollPos = $(document).scrollTop();
//Iterate through all node
$('#navbar5 > ul > li > a').each(function () {
var curLink = $(this);
var refElem = $(curLink.attr('href'));
//Compare the value of current position and the every section position in each scroll
if (refElem.position().top <= currentScrollPos && refElem.position().top + refElem.height() > currentScrollPos) {
//Remove class active in all nav
$('#navbar5 > ul > li').removeClass("active");
//Add class active
curLink.parent().addClass("active");
}
else {
curLink.parent().removeClass("active");
}
});
}
Coudn't understand what exactly you want, but for a beginnig let's try to make your code works first,
i removed the scrollHandle() function, and corrected your html,
now try to explain to me what you want and i'll edit my answer.
$('a').click(function (e) {
e.preventDefault();
var curLink = $(this);
var scrollPoint = $(curLink.attr('href')).position().top;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<div class="container-fluid example5">
<nav class="navbar navbar-default navigation1">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li>
<li>ABOUT</li>
<li>SERVICES</li>
<li><a class="red scroll-link" data-id="hot-offers" href="#hot-offers">HOT OFFERS</a></li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!-- content -->
<div id="about" class="page-section"><h2>about</h2>
<p>CONTENT....</p></div>
<div id="services" class="page-section"><h3>services</h3>
<p>CONTENT....</p></div>
<div id="hot-offers" class="page-section"><h3>Hot Offers</h3>
<p>CONTENT....</p></div>
<div id="testimonials" class="page-section"><h3>testimonials</h3>
<p>CONTENT....</p></div>
<div id="contact-us" class="page-section"><h3>Contact US</h3>
<p>CONTENT....</p></div>
<div style="height:300px"/>
Related
I have developed single page website and used bootstrap scroll spy when i click on nav item border bottom is not displaying before for this issue
i have added script now there is no issue in this.
But when i click nav link smooth scroll is not working link directly placing to
particular section without smooth scroll please anyone help me on this
Reference : http://floretmedia.net/temp/pbee/
<script>
$(document).ready(function(){
var headerHeight = $('header').innerHeight();
scrollTop: target.offset().top - headerHeight //offset height of header here too.
});
</script>
<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
<div class="custom-container">
<div class="header-right">
<div class="navbar-holder"> <!-- navbar-holder -->
<nav class="navbar navbar-default"> <!-- navbar-inverse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="ease cf">
<a class="navbar-brand" href="./">
<img src="images/logo.png" alt="sfatech Logo">
</a>
</div>
</div> <!-- /.navbar-header -->
<div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
<ul class="nav navbar-nav navbar-right navbrdr">
<li class="active">HOME </li>
<li> FEATURES </li>
<li>PRICING</li>
<li>CONTACT</li>
<li>SIGN UP</li>
</ul> <!-- /.navbar-nav -->
</div> <!--/.nav-collapse -->
</nav> <!-- /.navbar-inverse -->
</div> <!-- /.navbar-holder -->
</div><!-- header-right -->
</div><!-- custom-container -->
</header>
You can try with this one
jQuery(document).ready(function(){
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
})
without javascript, add this code in your CSS file
html{
scroll-behavior: smooth;
}
I have created one-page website. I have used bootstrap menu with the smooth scroll. When the user clicks on particular section, that section is targeting with the smooth scroll. There is no issue on the desktop.
But when it comes to mobile version,
When I click on Feartures then it's targeting the Featues section with smooth scroll but the menu is still shown on the mobile but whe i click feature section the bootstrap dropdown menu should close.
Please check my code: http://floretmedia.net/temp/pbee/
<script type="text/javascript">
$(document).ready(function(){
$(".navbar-toggle").click(function(){
if($(".navbar-nav li a")attr("href")){
$(".navbar-toggle in").css("display", "none!important");
}else{
$(".navbar-toggle in").css("display", "block");
}
});
function handler(click) {
var target = $(".navbar-nav li a");
if ( target.is(".navbar-nav li a")) {
target.children().toggle();
}
}
$("navbar-toggle").click( handler ).find(".collapsed").show();
});
</script>
<header>
<div class="custom-container">
<div class="header-right">
<div class="navbar-holder"> <!-- navbar-holder -->
<nav class="navbar navbar-default"> <!-- navbar-inverse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="ease cf">
<a class="navbar-brand" href="./">
<img src="images/logo.png" alt="sfatech Logo">
</a>
</div>
</div> <!-- /.navbar-header -->
<div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
<ul class="nav navbar-nav navbar-right navbrdr">
<li class="active">HOME </li>
<li> FEATURES </li>
<li>PRICING</li>
<li>CONTACT</li>
<li>SIGN UP</li>
</ul> <!-- /.navbar-nav -->
</div> <!--/.nav-collapse -->
</nav> <!-- /.navbar-inverse -->
</div> <!-- /.navbar-holder -->
</div><!-- header-right -->
</div><!-- custom-container -->
</header>
var mobileMenuButtons = $('.navbar-nav li a');
mobileMenuButtons.on('click', function() {
if ($( document ).width() < 768) {
$('.navbar-toggle').click();
}
});
This code added your js file. Good luck :)
Navbar uses the Bootstrap collapse plugin so you can just call it manually without having to deal with viewport width detection (which can be unreliable):
$('.navbar-nav > li > a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
I am expecting when I click the tab buttons the buttons to get active and display there corresponding content but I am not able to figure out why JavaScript function not working as expected. Below is my HTML, JavaScript and CSS respectively.
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="list" class="nav navbar-nav">
<li><a data-page="home-button" href="#">Home</a></li>
<li><a data-page="about-button" href="#">About</a></li>
<li><a data-page="contact-button" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div id="pages">
<div id="home-button" class="page" data-page="home-button">
<div class="container">
<div class="jumbotron">
<h1>Welcome to 2018</h1>
</div>
</div>
</div>
<div id="about-button" class="page hide" data-page="about-button">
<div class="container">
<div class="jumbotron">
<h1>Content 2</h1>
</div>
</div>
</div>
<div id="contact-button" class="page hide" data-page="contact-button">
<div class="container">
<div class="jumbotron">
<h1>Content 3</h1>
</div>
</div>
</div>
</div>
This is my JavaScript function:
$(document).ready(function() {
$("#navbar #list li a").on('click', function(e) {
e.preventDefault();
var page = $(this).data('page');
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
This is my CSS:
.hide {
display: none;
}
This $("#pages .page:not('.hide')") is an incorrect selector,
has to be changed to this: $("#pages .page:not(.hide)")
$(document).ready(function() {
$("#navbar #list li a").on('click', function(e) {
e.preventDefault();
var page = $(this).data('page');
$("#pages .page:not(.hide)").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="list" class="nav navbar-nav">
<li><a data-page="home-button" href="#">Home</a></li>
<li><a data-page="about-button" href="#">About</a></li>
<li><a data-page="contact-button" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div id="pages">
<div id="home-button" class="page" data-page="home-button">
<div class="container">
<div class="jumbotron">
<h1>Welcome to 2018</h1>
</div>
</div>
</div>
<div id="about-button" class="page hide" data-page="about-button">
<div class="container">
<div class="jumbotron">
<h1>Content 2</h1>
</div>
</div>
</div>
<div id="contact-button" class="page hide" data-page="contact-button">
<div class="container">
<div class="jumbotron">
<h1>Content 3</h1>
</div>
</div>
</div>
</div>
Is it possible to make Bootstrap only collapse the nav bar when the user is X pixels down the page?
I know this can be done for Affixing the menu by using the data attribute data-offset-top. But using this same attribute on the collapse button or on the nav div doesn't achieve this.
<nav class="navbar">
<div class="container-fluid">
<div>
<a class="navbar-brand" href="/"><img src="img/logo.png" alt=""/></a>
</div>
<!-- Affix Navbar when 280px from top: This works -->
<div class="navbar-header pull-right" data-spy="affix" data-offset-top="280">
<!-- Collapse Navbar when 280px from top: Doesn't work -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-offset-top="280" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<!-- The below should collapse only when the user is 280px or more from the top -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a class="text-uppercase page-scroll" href="#call-to-action">home</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
You could always do it yourself with jquery.
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 150; // set to whatever you want it to be
if(y_scroll_pos >= scroll_pos_test) {
$('#navbar-collapse').collapse('hide');
} else {
$('#navbar-collapse').collapse('show');
}
});
Note: Builds on this answer
If you are using lodash/underscore, you could use throttle to make sure the function doesn't execute too often.
how to scroll my page with easing effect?
i want when i will click on menu then its id section call by scrolling with easing effect
<body data-spy="scroll" data-target="#myNavbar" data-offset="0">
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<div class="container">
<h1 class="navbar-brand align" href="#">ashish</h1>
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>What i do?</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
thanks in advance plz help me
Like this:
Portfolio
Section:
<div id="Portfolio">....</div>
JS:
function scrollTo(element, event) {
event.preventDefault();
event.stopPropagation();
$('html, body').animate({ 'scrollTop' : $('#' + element).offset().top + 'px' }, 1000);
}
You will need jQuery for this.
Cheers