为什么我添加的第二个jQuery代码部分/新的CSS部分导致第一个jQuery代码在我的页面上不起作用

Question

好的，所以为了提高我的技能，我决定建立一个"游戏市场"负责页面。

我构建了具有滚动效果的搜索栏（向下滚动时隐藏 - 向上滚动时显示）。（第一个jQuery部分）。

然后创建了按钮 - 当单击 3 个点的图像时，它会打开一个菜单（这是我的旧帖子：如何为每个在其上打开菜单的列表项创建一个按钮？ = seconde jQuery 代码部分。

这是我的代码：http://jsfiddle.net/e0byofe2/5/您无法查看图像，因此这是我带有打印屏幕的旧帖子：如何为每个在其上打开菜单的列表项创建一个按钮？会让你更清楚。

第一个jQuery部分没有在我的PC/mmobile浏览器上运行，这与JSfiddle上的代码不同，它确实工作得很奇怪。我没有收到任何错误消息，所以我不知道问题出在哪里。我有一种感觉，那就是必须与CSS有关。

有人可以指出问题吗？

这是我的代码的更新：.CSS：

@media (max-width: 360px)  {
    body{
        margin: 0;
        height: 100%;
    }
    .main{
        overflow-x: hidden;
        width: 100%;
        height: 100%;
    }
    #header-wrap {
        width: 100%;
        position: fixed;
        background-color: #689f38;
        height: 62px;
    }
    #header {
        width: 100%;
        position: absolute;
        bottom: 0;
        box-shadow: 0px 0px 19px rgb(10, 29, 90);
        -webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
        -moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
    }

    .content{
        padding-top: 80px;
        width: 100%;
        /*height: 100%;*/
        background-color: #eeeeee;
    }
    #apps-header{
        margin-left: 10px;
        font-family: arial;
        background-image: url('triangle.png');
        background-position: bottom;
        width: 86px;
        background-repeat: no-repeat;
        background-size: 10px;
    }
    .line{
        width: 100%;
        height: 2px;
        background-color: #458b09;
        margin-top: 10px;
    }
    .apps{
        width: 100%;
        /*border: 1px solid black;*/
        padding-top: 10px;
        height: 100%;
    }
    .app{
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        box-shadow: 0px 0px 6px rgb(145, 145, 145);
        -webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
        -moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
        background-color: #fafafa;
        padding: 10px 8px;
        margin: 5px 8px;
        display: inline-table; /******/
        position: relative;
        width: 328px;
    }
    .app_icon{
        width: 83px;
        height: 83px;
        float: left;
    }
    .app_info{
        /*border: 1px solid red;*/
        float: left;
        width: 210px;
        height: 81px;
        padding-left: 20px;
    }
    .app_name{
        font-family: arial;
        font-size: 18px;
    }
    .app_comp{
        font-family: arial;
        font-size: 16px;    
        color: #595959;
    }
    .stars img{
        float: left;
        width: 14px; 
        height: 14px;
    }
    .free{
        color: #69a03a;
        font-family: arial;
        position: relative;
        bottom: -25px;
        left: 112px;
        font-size: 14px;
        width: 43px;
        text-align: left;
        float: left;
    }
    .dots{
        height: 25px;
        float: right;   
    }
    .dots_menu{
        display: none;
        width: 202px;
        position: absolute;
        top: 40px;
        right: 1px;
        z-index: 1;
        background: rgb(238, 238, 238);
        -webkit-box-shadow: 0px 4px 15px #000;
        -moz-box-shadow: 0px 4px 15px #000;
        box-shadow: 0px 4px 15px #000;
    }
    .dots_menu.show{
        display: block;
    }
    .dots_menu a {
        display: block;
        text-decoration: none;
        color: #000;
        padding: 10px;
        font-family: arial;
    }
}



@media (min-width :  240px) and (max-width : 320px ) {
    .content {
        padding-top: 70px;
    }
    #header-wrap {
        height: 55px;
    }
    #header-wrap img {
        width: 53px;
    }
    .app{
        padding: 5px 7px;
        width: 291px;
    }
    .app_icon{
        width: 74px;
        height: 74px;
    }
    .app_info{
        width: 180px;
        height: 74px;
        padding-left: 15px;
    }
    .app_name{
        font-size: 16px;
    }
    .app_comp{
        font-size: 14px;    
    }   
    .stars img{
        float: left;
        width: 12px; 
        height: 12px;
    }
    .free{
        font-size: 12px;
        left: 107px;
    }
    .dots{
        height: 22px;
    }
    .dots_menu{
        top: 29px;
    }
}

j查询：

$(document).ready(function(){

    /************ NAV BAR MENU SLIDE-UP/SLIDE DOWN ************/
    var previousScroll = 0,
        headerOrgOffset = $('#header').height();
    $('#header-wrap').height($('#header').height());
    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > headerOrgOffset) {
            if (currentScroll > previousScroll) {
                $('#header-wrap').slideUp();
            } else {
                $('#header-wrap').slideDown();
            }
        } else {
                $('#header-wrap').slideDown();
        }
        previousScroll = currentScroll;
    });
    /***********************************************************/


    /************ APP INSTALL MENU THING ************/
    $('.dots').click(function(e){
        $('.dots_menu').removeClass('show');
        $(this).next().addClass('show');
        $(document).mouseup(function (e)
        {
            var container = $(".dots_menu");
            if ( ! container.is(e.target) && container.has(e.target).length === 0)
            {
                $(".dots_menu").removeClass("show");
            }
        });
    });


    /***********************************************************/
});

Answer 1

我发现了问题。在我的代码上，我的身体有 100% 的高度。我给了它 1000px，它又开始工作了。我不知道为什么会发生这种情况。如果有人知道，我会很高兴听到:)