Question

So I have been experimenting with RootsTheme (which uses Bootstrap), WordPress (from Joomla! background) and Pagodabox;

here’s the result of it: http://ajmalafif.com/

However I am having some known issues with the navigation bar with any javascript solution that I’ve tried:

route #1) Chris Coyier’s smooth-scrolling

Currently my site runs on this one.

what doesn’t work
– for smaller screen or when browser resized, the nav will stop at awkwardly at much higher height (since it’s set to offset at -90px on > 1200px screen width)

what works
– the next & previous link button for images work (click on mysite.com#link doesn’t conflict between the nav bar anchor and the image link click anchor)

example of the code: http://jsfiddle.net/ajmalafif/LvPUC/1/

route #2) William Malo’s getElementbyId

I like and used this solution at first.

what doesn’t work
– it doesn’t have offset solution so it stops directly on the h1 title and blocks the view of it.
– it conflicts with the bootstrap-carousel.js where upon click the image carousel, the screen/navbar will moves and align the image with the top of the browser.

what works
– It works with any browser size (and upon resized) and targets/arrives accordingly.

example of the code: http://jsfiddle.net/ajmalafif/bReUF/

—

It may looks like route#1 is the clear winner but like what’s currently running on my site, it has few glitches especially when view, say inside an iPad. So is there any pointer/help I can get to make this works either by;

• a href target is accurately offset regardless of the browser width (maybe a solution to have diff offset based on diff browser’s width)?, OR

• a way to offset when using getElementbyId solution (see route#2) AND to make it compatible with bootstrap-carousel.js (so it doesn’t move itself when click another image carousel # anchor tag)?

Thanks for your concern and time for taking a look at this.

Answer 1

you can calculate browser’s height and return scrolling for that variable;

here is DEMO

var browH = $(window).height();
            //alert(browH);
    if ( browH < 500 ) {
      $(scrollElem).animate({scrollTop: targetOffset-80}, 800,function() { location.has = target;});
    }
    else if ( browH > 500 ) {
       $(scrollElem).animate({scrollTop: targetOffset-80}, 400,function() { location.has = target;});
    }