Question

我的代码切换下拉菜单：

$("#show-nav").click(function () {
        $(".mymenu55").slideToggle('slow');
    });

HTML：

<div class="mystickymenu" style="margin:70px 27px 200px 27px;"> 
<div class="row" id="show-nav"><a href="javascript:;">Show Nav</a></div>
<div class="row nav-bar mymenu55">

The menu contents

</div>
</div>
</div>

CSS：

@media only screen and  (max-width:767px){

.mymenu55{
        display:none ;

    }   
    #show-nav{
        display:block;

    }


}

并且它工作正常但是当我尝试使用stickymenu代码时，切换器无法在移动设备上滚动：

// Create a clone of the menu, right next to original.
$('.mystickymenu').addClass('original').clone().insertAfter('.mystickymenu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}

那么，如何在滚动时在移动视图上进行切换？我的代码出了什么问题？

我尝试点击使用但不起作用：

 $("#show-nav").on('click',function () {
        $(".mymenu55").slideToggle('slow');
    });

滚动时切换不适用于移动设备

0 个答案: