箭头导航基于您所在的分区

Question

有人知道是否有插件或类似的东西可以实现导航吗http://discover.store.sony.com/tablet/#entertainment

我说的是悬停在屏幕顶部和底部时出现的上下箭头。

Answer 1

理论上，这应该不会太难自己编写。当鼠标悬停在页面的某些部分时，这里有一个实现箭头的起点。您只需要根据用户当前正在查看的部分来处理将特定链接附加到箭头的操作

有关更多详细信息，请参阅评论。

Fiddle

请注意，在Fiddle中，我使用了event.pageX和event.pageY来获得当前鼠标位置，但实际上应该使用event.screenX和event.screenY。因为fiddle中的演示是作为一个小窗口嵌入到实际页面中的，所以使用后者是行不通的。

// Define how wide the areas should be
// where the arrow appears
var top_nav_height = 70;
var bottom_nav_height = 70;
// Get some dimensions
var page_height = $(document).height();
var half_arrow_size = $('.uparrow').width() / 2;
// Listen to the user moving their mouse
$(document).mousemove(function(event) {
    // Where is the mouse?
    var pos_y = event.screenY;    // Distance from top of the page
    var pos_x = event.screenX;    // Distance from left of the page
    var in_area;
    // Leave a 5px space to hide the arrows when 
    // the pointer moves outside of the page
    if (pos_y <= top_nav_height
        && pos_y > 5) {
        in_area = 'top_nav';
    }
    else if (page_height - pos_y <= bottom_nav_height
             && page_height - pos_y > 5) {
        in_area = 'bottom_nav';
    }
    // Show the arrow when in a nav area
    switch(in_area) {
        // We are in the top nav area
        case 'top_nav': 
            // Show the .uparrow and have it follow the mouse
            $('.uparrow')
                .show()
                .css({
                    top: pos_y - half_arrow_size, 
                    left: pos_x - half_arrow_size
                });
            break;
        // We are in the bottom nav area
        case 'bottom_nav':
            // Show the .bottomarrow and have it follow the mouse
            $('.bottomarrow')
                .show()
                .css({
                    top: pos_y - half_arrow_size, 
                    left: pos_x - half_arrow_size
                });
            break;
        // We aren't in a nav area
        default:
            // Hide both arrows
            $('.uparrow, .bottomarrow').hide();
    }
    // Decide where the arrow should link
});

为了处理这些链接，我想你也可以在页面的每个部分都有一组单独的箭头，所以它们链接到的目标几乎可以是硬编码的。