javascript - 滚动时将标题/导航转换为导航图标

Question

我想创建一个导航，在滚动时最小化为 3 栏导航/导航图标。我做了一些研究以找出页面上的页面滚动，但我不确定如何将导航从页面顶部的内联更改为导航图标中包含的最右侧的 block 级链接。有人可以解释如何做到这一点。我会制作两个导航并隐藏一个吗？

这里是默认状态下导航的当前js fiddle http://jsfiddle.net/claireC/8SUmn/

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

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

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

Answer 1

这是一种方法:

1。最小化导航指示器

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

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

2. 为.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/