开发者

Creating Anchor Link Within Masonry Set

开发者 https://www.devze.com 2023-04-07 10:53 出处:网络
I have a unique problem with Masonry that I would love some help with. Because I am loading fonts externally through Typekit, I have to include the Masonry code within window.load instead of document.

I have a unique problem with Masonry that I would love some help with. Because I am loading fonts externally through Typekit, I have to include the Masonry code within window.load instead of document.ready (It is necessary to load the fonts before Masonry loads because otherwise the line lengths are different so the absolute positioning gets messed up source). I also need to link directly to sections within the Masonry group (as anchors wi开发者_开发问答thin the page). The problem with combining these two things is that if you use window.load then the anchor does not exist when the page loads, so the link leads to the top of the Masonry section instead of the specific section within the Masonry section with the link. Any ideas of how to correct this? The easiest solution would be to get the code to work without having to resort to window.load. Unfortunately I have not been able to find an alternative. Any help would be awesome.


  1. Use Typekit font event to trigger masonry have fonts have/haven't loaded
  2. Catch any hashes and force scroll to them with $(window).load()

var $container;

function triggerMasonry() {
  // don't proceed if doc not ready
  if ( !$container ) {
    return
  }
  $container.masonry({
    // options...
  });
}

$(function(){
  $container = $('#container');
  triggerMasonry();
});

// trigger masonry after fonts have loaded
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry // triggered in Chrome
});

// catch any hashes and force scroll to them
// resolves Masonry bug
var $window = $(window);

$window.load(function(){
  if ( window.location.hash ) {
    var destination = $( window.location.hash ).offset().top;
    $window.scrollTop( destination );
  }
});
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号