WordPress.org

Ready to get started?Download WordPress

Forums

Bootstrap affix sidebar to calculate bottom offset with JS? (1 post)

  1. sparklogix
    Member
    Posted 1 year ago #

    I had a developer on our team working on a theme customization based on Bootstrap that involved getting the sidebar to have a fixed position using Bootstrap's affix plugin.

    It would be pretty cut and dry, if not for the fact that we need the bottom offset to calculate the outer height of the Prefooter and Footer.
    I was able to get this working on the top offset using this code (note, this is in our own .js file, we are not modifying the Bootstrap files for ease in future updates):

    if($('.jumbotron').hasClass('header-fixed')) {
    		if($('.jumbotron').css('position')=='fixed') {
    			if($('#headmenu-bar').length > 0) {
    				$('#headmenu-bar').css('margin-top',($('#pre-header').outerHeight() + $('.jumbotron').outerHeight())+'px')
    			} else {
    				$('#main-content').css('margin-top',($('#pre-header').outerHeight() + $('.jumbotron').outerHeight())+'px')
    				$('.widget-wrap.affix-top').css('top',($('#pre-header').outerHeight() + $('.jumbotron').outerHeight())+'px')
    			}
    		}

    This is the code our other developer put in for the bottom offset, but it's not working, the sidebar just shoots back to the top when the styles is switched to .affix-bottom.

    if($('.footer').css('position')=='fixed') {
    		if($('footer.navbar').hasClass('navbar-static-top')) {
    			$('footer.navbar').removeClass('navbar-static-top');
    			$('footer.navbar').addClass('navbar-fixed-bottom');
    		}
    		$('#main-content').css('margin-bottom',($('.footer').outerHeight()));
    		$('.widget-wrap.affix-bottom').css('bottom',($('#prefooter').outerHeight() + $('footer').outerHeight())+'px')
    
    	}
    	if($('.footer').css('position')=='scroll') {
    		$('.widget-wrap.affix-bottom').css('bottom',($('#prefooter').outerHeight() + $('footer').outerHeight())+'px')
    	}

    -and-

    setTimeout(function () {
        $('.widget-wrap.stay').affix({
          offset: {
            top: ($('#pre-header').outerHeight() + $('.jumbotron').outerHeight() + $('#headmenu-bar').outerHeight() + 42)
          , bottom: ($('.footer').outerHeight(true) + 112)
          }
        })
    	},100)

    I'm by no means well versed in javascript, which is why I had another developer working on that part. But since he's no longer on the project, I'm stuck. Thoughts?

Topic Closed

This topic has been closed to new replies.

About this Topic