html - Left side div is not aligning properly in bootstrap -
this question has answer here:
i have sticky header in code. , trying add 1 more sticky div in left side. looking fine. when try scroll content, layout changing. @ minimum size (mobile size) left side div not aligning properly. please suggest.
var onresize = function() { $("body").css("padding-top", $(".navbar-fixed-top").height()); }; $(window).resize(onresize); $(function() { onresize(); }); $(document).ready(function () { $('body').scrollspy({ target: '#mainnavbar', offset: 10 }); });html, body { height: 100%; } body { padding-top: 50px; } .navbar-nav { float: left; margin: 0; } .navbar-nav>li { float: left; } .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; } .navbar-offset { top: 0px; } .container { background: #ccc; } .affix { top: 20; }<!doctype html> <html> <head> <title>bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default navbar-fixed-top navbar-offset"> <div style="font-size:30px;margin-left:30px;">title , logo here</div> </nav> <div class="container"> <div class="row"> <div class="col-lg-4 col-sm-4 col-md-4" style="background-color:gray;" data-spy="affix" data-offset-top="0"> <div style="height:280px;background-color:lightblue;margin-top:20px;"></div><br/> <div id="mainnavbar"> <ul> <li class="active"><a href="#divdesert">desert</a></li> <li><a href="#divlighthouse">lighthouse</a></li> <li><a href="#divtulips">tulips</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> animals <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#divjellyfish">jellyfish</a></li> <li><a href="#divpenguins">penguins</a></li> </ul> </li> </ul> </div> </div> <div class="col-lg-8 col-sm-8 col-md-8" style="background-color:lightblue;font-size:30px;"> <div id="divdesert"> <h1>desert</h1> <p>the affix plugin allows element become affixed (locked) area on page.</p> </div> <div id="divlighthouse"> <h1>lighthouse</h1> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> <div id="divtulips"> <h1>tulips</h1> <p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div id="divjellyfish"> <h1>jellyfish</h1> <p>but must explain how mistaken idea of denouncing.</p> </div> <div id="divpenguins"> <h1>penguins</h1> <p>li europan lingues es membres del sam familie.</p> </div> </div> </div> </div> </body> </html>
when left sidebar gets position: fixed taken out of flow of page, means main content moves on take place.
a way solve adding margin main content when scroll. margin should equal amount of space occupied sidebar (33.333%).
you haven't tagged question jquery, if open here possible approach. may have tweak numbers using media queries.
var onresize = function() { $("body").css("padding-top", $(".navbar-fixed-top").height()); }; $(window).resize(onresize); $(function() { onresize(); }); $(document).ready(function() { $('body').scrollspy({ target: '#mainnavbar', offset: 10 }); }); $(window).scroll(function() { var scroll = $(window).scrolltop(); if (scroll > 0) { $("#content").addclass("fix"); } else { $("#content").removeclass("fix"); } });html, body { height: 100%; } body { padding-top: 50px; } .navbar-nav { float: left; margin: 0; } .navbar-nav>li { float: left; } .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; } .navbar-offset { top: 0px; } .container { background: #ccc; } .affix { top: 20; } #content.fix { margin-left: 33.333333%; }<!doctype html> <html> <head> <title>bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default navbar-fixed-top navbar-offset"> <div style="font-size:30px;margin-left:30px;">title , logo here</div> </nav> <div class="container"> <div class="row"> <div class="col-lg-4 col-sm-4 col-md-4" style="background-color:gray;" data-spy="affix" data-offset-top="0"> <div style="height:280px;background-color:lightblue;margin-top:20px;"></div><br/> <div id="mainnavbar"> <ul> <li class="active"><a href="#divdesert">desert</a></li> <li><a href="#divlighthouse">lighthouse</a></li> <li><a href="#divtulips">tulips</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> animals <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#divjellyfish">jellyfish</a></li> <li><a href="#divpenguins">penguins</a></li> </ul> </li> </ul> </div> </div> <div class="col-lg-8 col-sm-8 col-md-8" id="content" style="background-color:lightblue;font-size:30px;"> <div id="divdesert"> <h1>desert</h1> <p>the affix plugin allows element become affixed (locked) area on page.</p> </div> <div id="divlighthouse"> <h1>lighthouse</h1> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> <div id="divtulips"> <h1>tulips</h1> <p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div id="divjellyfish"> <h1>jellyfish</h1> <p>but must explain how mistaken idea of denouncing.</p> </div> <div id="divpenguins"> <h1>penguins</h1> <p>li europan lingues es membres del sam familie.</p> </div> </div> </div> </div> </body> </html>
Comments
Post a Comment