开发者

centre thumbnail in scrollbar (jQuery)

开发者 https://www.devze.com 2022-12-15 08:05 出处:网络
Please check out this page: http://onomadesign.com/wordpress/identity-desig开发者_如何转开发n/hans-appenzeller/

Please check out this page: http://onomadesign.com/wordpress/identity-desig开发者_如何转开发n/hans-appenzeller/

The thumbnails on the right, link to different portfolio items (Wordpress single posts). I want the thumbnail of the active project to be vertically centred in the scrollbar when the user enters the page. Right now, it resets the scrollbar, so people lose sight of navigation. How to accomplish this using jQuery?

Thanks.


First add the class of "selected" to the li of the current link and use that class to add your margin rather then inline css

Looks like you are using the jScrollPlane Plugin. Which will let you do something like this with your current code.

$('.jScrollPaneContainer').scrollTo('.currentthumb');

See this page for the jScrollPlane scrollTo functionality


Try this and report what happens, I'm unable to test this myself:

$(function() {
    // Get the link that points to the current page
    var $active_link = $('a[href=\''+window.location.href+'\']');        
    // Get the scroll pane that the link is in
    var $scroll_pane = $active_link.closest('#scroll-pane');

    // Get the position where we should scroll
    var scrolltop = $active_link.offset().top - $(window).height() / 2;
    // Scroll amount must be at least 0
    scrolltop = scrolltop < 0 ? 0 : scrolltop;

    // Scroll the scrollpane so that the link sits at the middle
    $scroll_pane.scrollTop(scrolltop);
});

Note that this needs some refinement, but first you have to confirm that this works in your case – I'm just guessing on the scroll-pane part according to the documentation of jScrollPane.


I found out that the jScrollPane plugin, has a ScrollTo function of his own: http://www.kelvinluck.com/assets/jquery/jScrollPane/scrollTo.html. Even with jQuery selectors (at the bottom).

And I managed to give the current thumbnail image a class, called 'currentthumb'.

Now I just need to make that ScrollTo function happen on page load and not on a click event, right? This looks to be easier, no?

Thanks.

0

精彩评论

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