cela cela - 2 years ago 74
Javascript Question

Side navbar not responsive

I wanted to make a scroll-able bootstrap side nav that is fully responsive.
I have searched for every possible way in different links and sites but I am not achieving what I want.

So here is my problem:
I want a side nav that is full-responsive in every media screens. It is behaving normal in larger screens, but in small screens the offset that I had set to the side nav does not match and I don't think it is possible to add offset in every single media screens through jquery. So, please can anyone help me with this problem? Below is the link for the JSFiddle that I created and this is the jquery that I am using:

$(document).ready(function() {
offset: {
top: 1100,
bottom: ($('.other').outerHeight(true)) + 445


$('#myNav a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
scrollTop: target.offset().top - 50
}, 1000);
return false;


Thank you in advance for your help. It means a lot. I also wanted to ask if we could give offset value in percentage rather than pixels.

Answer Source

I have made some changes in JS to set the offset from top and bottom by using class or ID

    var stickyElement   = '#myScrollspy',  
     bottomElement   = '.other'; 
     if($( stickyElement ).length){
     $( stickyElement ).each(function(){
     var fromTop = $( this ).offset().top, 
     fromBottom = $( document ).height()-($( this ).offset().top + $( this ).outerHeight()),
     stopOn = $( document ).height()-( $( bottomElement ).offset().top)+($( this ).outerHeight() - $( this ).height()); 
      if( (fromBottom-stopOn) > 200 ){
      $( this ).css('width', $( this ).width()).css('top', 0).css('position', '');
      $( this ).affix({
      offset: { 
       bottom: stopOn
        }).on('affix.bs.affix', function(){ $( this ).css('top', 0).css('position', ''); });
         $( window ).trigger('scroll'); 

You can overcome with it using Jquery

you can see it in this link

var stickyElement = '#myScrollspy', bottomElement = '.other';

just give the class name or ID you want in these 2 lines to get offset from top and bottom.

Hope this will help you.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download