Question

我一直在摆弄我的导航菜单并决定添加一项功能，当您向下滚动某个点时，NAV向下滑入视口，这样用户就不必向上滚动到顶部页面导航。这是最近变得非常流行的东西。

所以我摆弄了这个javascript做了伎俩（请注意我对jquery一点也不流利）：

jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
    $("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});

});

现在我把它读作...复制或'克隆'（制作另一个）.menu_wrapper元素在原始+之前添加类.shrink到它...只有当我们滚动超过700px时，我们才会由于类.slidedown

，看到这个重复的资产净值

CSS：

.shrink { position:fixed; top:-400px; left:0; width:100%; border-top: 0px solid #35d3c3; z-index:99999}
.slidedown .shrink { top:0;}

现在这是100％工作而且我很激动但是它从来没有顺利航行!!!现在当我将视口更改为小于767px的屏幕宽度时我遇到了问题 - 是的，我的网站是响应，这是我的资产净值通过使用CSS和javascript更改为典型的下拉（即使没有上面的javascript /效果）：

jQuery(document).ready(function($){
$('.menu_wrapper').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
    $("#menu").slideToggle();
    $(this).toggleClass("active");
});
});

我的问题是现在有一个重复的下拉前置NAV（1在另一个上面），如下所示：

+ MENU

一个NAV可以工作，但另一个没有...无论如何，无论如何，当我的媒体查询达到“移动状态”（低于767px）并且NAV预先下降时，这是我不想要的全部下滑效果克隆（上面发布的第一个jquery）的东西了。当我低于767px的屏幕宽度时，我希望该规则几乎不存在或不适用。我怎样才能做到这一点？

我尝试过一个明显的例子：

.shrink { display:none}
.slidedown .shrink { display:none}

几乎看起来我已经中了大奖，只留下了1个前置菜单：

+ MENU

但是当我点击它时没有任何反应 - 它没有滑动并显示菜单列表项。

但我想在javasacript中添加规则：

jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
    $("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});

});

当我们低于767px的宽度时，我们忽略了clone（）函数/规则等？

我已经完成了一些关于removeclass等的谷歌搜索，但因为我是javascript的傻瓜，我可能做错了。

任何帮助我都会感激吗？

Answer 1

由于您想要根据某些视口尺寸隐藏该菜单，为什么不使用媒体查询？

@media all and (max-width: 766px){
    .shrink{ display: none; }
}

或

.shrink{ display: none; }

@media all and (min-width: 767px){
    .shrink{ display: block; }
}

（这可能不是在那里使用的最佳宽度值或CSS属性，但这应该让你开始。）

编辑：如果您想在javascript中完成所有操作，the matchMedia() API也适合您。

Answer 2

如果ajm发布的CSS媒体查询方法不适合您，则可以尝试仅在满足媒体查询时执行代码。 handleMediaQuery()中的代码仅在宽度超过767px时才会运行;

//Media query listeners
var mql = window.matchMedia("(min-width: 767px)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);

function handleMediaQuery(mql) {
    if (mql.matches) {
        // Do stuff here that you want done when the query matches
    }
    else {
        // Do stuff here that you want done when the query does not match
    }
}

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries

当屏幕宽度小于时，如何在Javascript中删除clone（）规则

+ MENU

+ MENU

+ MENU

2 个答案: