Question

我想创建一个导航，最小化滚动到3栏导航/导航。我做了一些研究以找出页面上的页面滚动，但我不确定如何将导航从内嵌更改到页面顶部到块级别链接到navicon中包含的最右侧。有人可以解释一个人会怎么做。我可以进行两次导航并隐藏一个吗？

以下是默认状态下导航的当前js小提琴 http://jsfiddle.net/claireC/8SUmn/

滚动时，我希望这些3个链接包含在导航图中，如下面的网站所示 http://goldengridsystem.com

下面的代码找出用户滚动的时间

$(window).scroll (function () {
var topScroll = $(this).scrollTop();
    if (topScroll >= 700) {
     $('header').slideToggle();
    }
   })

Answer 1

这是一种方法：

1。最小化导航指示器

创建最小化的导航指示器并将其隐藏。

$('<div class="nav-min"></div>').prependTo($('.container')).hide();

为.nav-min

定义点击功能

$('.nav-min').click(function () {
    /* To prevent nav being hidden even if 
    scroll Y position is greater than 700 */
    $(this).addClass('expanded');

    /* Show full menu and hide minimized nav indicator */
    $('header').slideDown().removeClass('hidden');
    $('.nav-min').fadeOut();
});

2。滚动事件

    $(window).scroll(function () {
        var topScroll = $(this).scrollTop();
        if (topScroll >= 700) {

            /* Check if minimized nav has been clicked. 
            If it hasn't, hide full nav. */
            if (!$('.nav-min').hasClass('expanded')) {
                $('header').slideUp().addClass('hidden');
                $('.nav-min').fadeIn();
            }

        } else {
            $('header').slideDown().removeClass('hidden');
            $('.nav-min').fadeOut();

            /* Remove "forced-show" method so that  
            it resets back to the initial function */
            if ($('.nav-min').hasClass('expanded')) {
                $('.nav-min').removeClass('expanded');
            }
        }
    })

JSFIDDLE： http://jsfiddle.net/shodaburp/6bAW5/

滚动时将标题/导航转换为navicon

1 个答案:

1。最小化导航指示器

2。滚动事件