Hello guys I'm using scroll spy of bootstrap. I have applied some height and a overflow to make the scroll appear but after applying it the scroll spy does not works. I mean that when I scroll up or down the link in the navbar does not changes If I remove the style that I gave it starts working. Here is a Jsbin code. Hope this helps and please tell me what is it that I'm doing wrong
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div style="height:200px; overflow:scroll;">
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
..
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
..
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
..
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
..
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
..
</div>
</div>
</body>
JsBin
The problem is that you're overriding the BODY scroll by using style="height:500px;overflow:scroll;" in the DIV that wraps all of the sections.
As a result, the BODY is never scrolled. You can instead put the ScrollSpy on this wrapper DIV..
<div style="height:500px;overflow:scroll;" data-spy="scroll" data-target="#myNavbar" data-offset="50">
...
</div>
Also, the data-target should be #myNavbar...
Working Demo on Codeply
Try the following code. Taken this example form the page - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-scrollspy.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 ScrollSpy Events</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".scroll-area").scrollspy({target: "#myNavbar"});
});
</script>
<style type="text/css">
.scroll-area {
height: 250px;
position: relative;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Scrollspy</h2>
<p>Scroll the area below the navbar and see how menu items are highlighted automatically based on the scroll position. The items in dropdown submenu will be highlighted as well.</p>
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Scrollspy</a>
</div>
<!-- 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">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div>
</nav>
<div class="scroll-area" data-spy="scroll" data-offset="0">
<div class="section">
<h3 id="section-1">Section 1</h3>
<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>
</div>
<hr>
<div class="section">
<h3 id="section-2">Section 2</h3>
<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>
</div>
<hr>
<div class="section">
<h3 id="section-3">Section 3</h3>
<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>
</div>
<hr>
<div class="section">
<h3 id="section-4">Section 4</h3>
<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>
</div>
</div>
</div>
</body>
</html>
I think its a some kind of bug trying to remove height and add min-height instead or take another div element and give it max-height:200px or what ever you want
hope this help http://jsbin.com/kubisivuwo/edit?html,output
Related
Sorry for my English.
I'm creating a website, and I want to implement smooth scroll for internal links. I have tried many different codes, html {scroll-behavior: smooth;}, and different JavaScript codes.
The horizontal navbar works fine with those codes:
But the vertical navbar, which works as scrollspy, doesn't work with smooth scroll.
This is my code:
<!doctype html>
<html lang="pt-bt">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title> Curso HTML Bootstrap </title>
<!--Requeried Meta TAGS!-->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap/compiler/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary">
<div class="container">
<a class="navbar-brand h1 mb-0" href="#">Curso</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#item3">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Perfil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Serviços</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Depoimentos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatos</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
id="navDrop">Redes Sociais</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
<a class="dropdown-item" href="#">Youtube</a>
<a class="dropdown-item" href="#">Linkedin</a>
</div>
</li>
</ul>
<form class="form-inline">
<input class="form-control ml-4" type="search"
placeholder="Pesquisar...">
<button class="btn btn-dark" type="submit">Ok</button>
</form>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/idaho239691_1920.jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem ipsum dolor sit amet</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam commodo dolor a ligula fringilla laoreet. Sed sagittis
eleifend sem, eget pretium est aliquam sit amet. Vivamus at
consectetur felis. Proin eu accumsan lectus. Etiam id ante at ex
tempor iaculis.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/img (35).jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Etiam ac elit et eros consequat luctus.</h1>
<p class="lead">Etiam ac elit et eros consequat luctus. Phasellus eu
sapien molestie, pharetra odio ac, mollis turpis. Mauris aliquam arcu
in orci accumsan, et semper mi lacinia.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/maxresdefault.jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Phasellus tempus eget enim vel pharetra.</h1>
<p class="lead">Phasellus tempus eget enim vel pharetra. Aliquam erat
volutpat. Mauris vehicula lectus quis tellus semper pretium vitae a
purus. Ut vulputate quam eget tincidunt efficitur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button"
data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Avançar</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Maecenas orci risus</h1>
<p>Maecenas orci risus, consequat eu luctus vehicula, vulputate sit amet
arcu.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-sm-5 col-md-3">
<nav id="navbarVertical" class="navbar navbar-light bg-light">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item1">Lorem ipsum</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item1-1">Curabitur bibendum</a>
<a class="nav-link ml-3" href="#item1-2">Phasellus posuere</a>
</nav>
<a class="nav-link my-2" href="#item2">Sed feugiat</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item2-1">Aliquam ac</a>
<a class="nav-link ml-3" href="#item2-2">Maecenas eleifend</a>
</nav>
<a class="nav-link my-2" href="#item3">Nunc vitae</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item3-1">Duis nec orci</a>
<a class="nav-link ml-3" href="#item3-2">Ut imperdiet</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-7 col-md-9">
<div data-spy="scroll" data-target="#navbarVertical" data-offset="0"
class="scrollspySite">
<h4 id="item1">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis tortor fermentum ullamcorper laoreet. Fusce fermentum nibh
sed lacus euismod tincidunt. Aliquam lorem turpis, condimentum id
augue ut, aliquet pretium eros. In id neque mi. Fusce semper magna
eget pharetra porta. Donec auctor scelerisque nisi, eleifend rhoncus
lectus suscipit quis. Etiam scelerisque feugiat varius. Maecenas sed
malesuada mi. Pellentesque sit amet dolor aliquet, imperdiet odio
vitae, suscipit dolor. Aliquam ullamcorper eros ac justo volutpat, nec
lacinia metus tempus. Morbi at odio vestibulum, scelerisque mauris in,
laoreet massa. Praesent consectetur eros quis dapibus pharetra.</p>
<h5 id="item1-1">Teste</h5>
<p>Vestibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.</p>iquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi at
orci.</p>
<h5 id="item1-2">Aliquam at</h5>
<p>Aliquam at enim tincidunt, fringilla purus at, lacinia ipsum. Aenean
sed convallis elit, eu hendrerit urna. Praesent hendrerit dui non
vulputate lobortis. Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta.</p>
<h4 id="item2">Sed varius</h4>
<p>Sed varius augue in velit lobortis ultricies. Donec auctor vitae
justo quis laoreet. Sed ac tellus metus. Nunc non mauris est. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Cras turpis
justo, lobortis et cursus in, mattis at est. Sed lorem enim, dignissim
at sem vitae, mattis porttitor turpis. Nunc ac eleifend orci, et
tincidunt sapien. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur placerat varius
aliquet. Nullam sit amet velit laoreet, accumsan purus at, molestie
est. Aenean sodales turpis vel egestas dapibus. Mauris fringilla at
eros quis blandit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed convallis nisi fermentum
varius tincidunt.</p>
<h5 id="item2-1">Ut scelerisque</h5>
<p>Ut scelerisque neque sed nunc porttitor, ut egestas metus accumsan.
Proin quis odio nec ex fringilla cursus. Quisque faucibus dictum
risus, vitae porttitor felis varius ac. Etiam sit amet gravida felis,
sed porta velit. Etiam rhoncus egestas maximus. Quisque mollis, elit
eu ultricies luctus, velit mi congue nisi, iaculis congue massa risus
vitae lectus. In hac habitasse platea dictumst.</p>
<h5 id="item2-2">Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis tortor fermentum ullamcorper laoreet. Fusce fermentum nibh
sed lacus euismod tincidunt. Aliquam lorem turpis, condimentum id
augue ut, aliquet pretium eros. In id neque mi. Fusce semper magna
eget pharetra porta. Donec auctor scelerisque nisi, eleifend rhoncus
lectus suscipit quis. Etiam scelerisque feugiat varius. Maecenas sed
malesuada mi. Pellentesque sit amet dolor aliquet, imperdiet odio
vitae, suscipit dolor. Aliquam ullamcorper eros ac justo volutpat, nec
lacinia metus tempus. Morbi at odio vestibulum, scelerisque mauris in,
laoreet massa. Praesent consectetur eros quis dapibus pharetra.</p>
<h4 id="item3">Vestibulum mollis</h4>
<p>Vestibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.estibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.</p>
<h5 id="item3-1">Aliquam at</h5>
<p> raesent tempor tellus in ultricies gravida. Nullam bibendum bibendum
justo eget pulvinar. Su Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta. liquam at
enim tincidunt, fringilla purus at, lacinia ipsum. Aenean sed
convallis elit, eu hendrerit urna. Praesent hendrerit dui non
vulputate lobortis. Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta</p>
<h5 id="item3-2">Sed varius</h5>
<p>Sed varius augue in velit lobortis ultricies. Donec auctor vitae
justo quis laoreet. Sed ac tellus metus. Nunc non mauris est. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Cras turpis
justo, lobortis et cursus in, mattis at est. Sed lorem enim, dignissim
at sem vitae, mattis porttitor turpis. Nunc ac eleifend orci, et
tincidunt sapien. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur placerat varius
aliquet. Nullam sit amet velit laoreet, accumsan purus at, molestie
est. Aenean sodales turpis vel egestas dapibus. Mauris fringilla at
eros quis blandit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed convallis nisi fermentum
varius tincidunt.</p>
</div>
</div>
</div>
</div>
<!-- jQuery first, then popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
</html>
And my styles.scss is:
.scrollspySite{
position: relative;
overflow: auto;
height: 400px;
}
html {
scroll-behavior: smooth;
}
I have been attempting to fix my navbar to the top of the screen when I scroll down but it isn't working. Why is this the case?
Take a look at the bootsnipp: http://bootsnipp.com/snippets/4nqgm
I am attempting to make it look like: http://bootsnipp.com/snippets/featured/navbar-fixed-on-scrolling-with-transition
HTML:
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" href="#">
<img alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a href="#">Projects</li>
<li><a href="#">Services</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
<div id="second-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
<div id="third-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
CSS:
.navbar-default
{
background-color: #fbfbfb;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
Javascript:
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 300) {
$('nav navbar-nav').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('nav navbar-nav').removeClass('navbar-fixed');
}
});
});
The jQuery selector should be..
$('.nav.navbar-nav'). instead of $('nav navbar-nav').
However your example is very different than the other example. You'll also find other animated navbar examples on Bootply.
Or just try this one as JS Code
$(document).ready(function() {
$('#nav').affix({
offset: {
top: $('header').height()
}
});
});
You just need to fix the way you are trying to target the selector. You have:
$('nav navbar-nav')
Which would target <nav> and <navbar-nav> elements. Replace it with:
$('nav.navbar')
To target <nav> elements with the navbar class.
See this working example:
$(document).ready(function() {
$(window).scroll(function() {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 300) {
$('nav.navbar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('nav.navbar').removeClass('navbar-fixed');
}
});
});
.navbar-default {
background-color: #fbfbfb;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed !important;
width: 100%;
}
.navbar-nav {
float: none;
margin: 0 auto;
display: block;
text-align: center;
}
.navbar-nav>li {
display: inline-block;
float: none;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" href="#">
<img alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a href="#">Projects</li>
<li><a href="#">Services</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
<div id="second-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
<div id="third-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
I have a tab structure consisting of 5 tabs. All tabs are working fine. Now in my first tab, I have few header tags which are same as the other 4 tabs. So when clicking of each of them, I want to change the active tab and also the contents. My code is as below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#overview">Overview</a>
</li>
<li><a data-toggle="tab" href="#tab1">tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">tab2</a>
</li>
<li><a data-toggle="tab" href="#tab3">tab3</a>
</li>
<li><a data-toggle="tab" href="#tab4">tab4</a>
</li>
</ul>
<div class="tab-content">
<div id="overview" class="tab-pane fade in active">
<p>overview</p>
<br>
<a href="#tab1">
<h3>tab1 link</h3>
</a>
<br>
<a href="#tab2">
<h3>tab2 link</h3>
</a>
<br>
<a href="#tab3">
<h3>tab3 link</h3>
</a>
<br>
<a href="#tab4">
<h3>tab4 link</h3>
</a>
</div>
<div id="tab1" class="tab-pane fade">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id="tab2" class="tab-pane fade">
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis.
Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<div id="tab3" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
Any help soon will help.
Based off bootstrap documentation here
Use a jquery function like this
$('a').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('#myTab a[href="' + $(this).attr('href') + '"]').tab('show');
})
THat will work on any a link you click and take you to the tab its href is set to
Look at this codepen
You just have to place the content inside tab-content to make it work.
This will work like you want it to. Try it:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#tab1">tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">tab2</a>
</li>
<li><a data-toggle="tab" href="#tab3">tab3</a>
</li>
<li><a data-toggle="tab" href="#tab4">tab4</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<p>overview</p>
<br>
<div id="tab1" class="tab-pane fade in active">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id = "tab2" class = "tab-pane fade">
<br>
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis.
Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<br>
<div id="tab3" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
Run this codepen
Basically, I am creating a web page for my school project... sorry for silly explanation but..
I want to have fixed navigation bar at the top of the site and when you click any link it will move you up or down to the requested content (not to different subpage, just scrolling up/down)..
see example here: http://www.danbrown.com/
however I need just the simplest way how to do it...and I didnt find any tutorial whatsoever.
Thanks
You need to use fixed position for you menu.
http://www.w3schools.com/css/css_positioning.asp
And to scroll to a particular spot in the page use link anchor.
http://www.echoecho.com/htmllinks08.htm
I could code the ole thing for you but you will learn nothing.
Link anchors are totally the easiest and most reliable way to do what you want.
<a name="a">text</a> or <a id="a">text</a> both set an anchor point somewhere, and text will scroll the viewport to that link.
You can also set the id attribute on other elements, say, headings, to make them into anchor targets, but the name property will only work on <a> tags.
As a starting point, you could use the following twitter bootstrap demo to do the fixed navigation bar.
The jquery code is just needed to make a scroll animation. It would also work with-out jQuery.
In the demo you should do a change effect to the navigation to show the current scroll position. That's not in the demo.
You can find the same code here at jsFiddle.
The initial scroll effect is not difficult to do. Please check my anwser in this SO question that will help you to do that effect.
(You could also do the fixed navigation with the code from the counter example and do your own menu styling.)
$(function () {
// source for transition animation from here: https://stackoverflow.com/questions/12643510/css3-transitions-with-anchors
$('a[href^=#]').on("click", function (e) {
var t = $(this.hash);
var t = t.length && t || $('[name=' + this.hash.slice(1) + ']');
if (t.length) {
var tOffset = t.offset().top;
$('html,body').animate({
scrollTop: tOffset - 20
}, 'slow');
e.preventDefault();
}
});
});
body {
min-height: 2000px;
padding-top: 50px;
}
/* anchor style to scroll to the right position */
a.anchor {
display: block;
position: relative;
top: -20px;
visibility: hidden;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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> <a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Dummy 1
</li>
<li>Dummy 2
</li>
<li>Contact
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row"> <a class="anchor" id="dummy1"></a>
<h1>Dummy 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<div class="row"> <a class="anchor" id="dummy2"></a>
<h1>Dummy 2</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>
I have 3 divs as below and 3 links as below.
Divs
<div id="div1">
Div 1
</div>
<div id="div2">
Div 2
</div>
<div id="div3">
Div 3
</div>
Links
<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>
<a id="link3" href="#">Link 2</a>
What I'm trying to do is create a slider. When I
click on the link1 -> show div 1
click on the link2 -> show div 2
click on the link3 -> show div 3
Also I'm trying to make it operate just as a slider. In a slider it has got only prev and next links where here I have multiple link. For each link there will be a respective div.
JsFiddle links is : http://jsfiddle.net/n4p4x/1/
Can you please tell me where I have gone wrong?
I got this check this below code and
fiddle http://jsfiddle.net/sarfarazdesigner/n4p4x/2/
it is solve your problem?
let me know
i have done according to what i understand by your question.
#main{
position:relative;
overflow:hidden;
width:960px;
margin:50px auto 0;
}
#main div{
float:left;
width:200px;
height:200px;
overflow:hidden;
}
html
<a id="link1" href="#">Link 1</a><br/>
<a id="link2" href="#">Link 2</a><br/>
<a id="link3" href="#">Link 2</a>
<br/><br/><br/>
<div id="main">
<div id="div1">
Div 1 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.
</div>
<div id="div2">
Div 2 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.
</div>
<div id="div3">
Div 3 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.
</div>
</div>
You must style your div's
<div id="main">
<div class="slice" id="slide_1"></div><div class="slice" id="slide_2"></div><div class="slice" id="slide_3"></div>
</div>
#main{
position:relative;
}
.slice{
float:left;
width:200px;
height:200px;
overflow:hidden;
}
The most important is: float:left; try it
check out my own scroller: http://dap.ntua.gr/el
http://dap.ntua.gr/el/template/js/scroller.js