Question

这是我的网站：http://www.glovesboxing.co.nz/ 您将在顶部看到一个标题在页面向下滚动50px后折叠，并在向上滚动时再次展开。

我想这样做，以便在向上滚动时不是扩展，而是在标题上有一个切换按钮来展开/折叠它。（我仍然希望它在初始滚动50px后像现在一样崩溃）

我认为这很简单，但我不能很好地了解javascript以使标记正确。

这是我当前的脚本（此问题适用于＆＃34;标题＆＃34;元素 - ＆＃34;侧边栏＆＃34;＆＃34;右边内容＆＃34;只是在那里调整它们的顶部边距随着标题的扩展/折叠而变化，因此它们随着标题一起移动：

<script type="text/javascript">
    $(document).on("scroll",function(){
        if($(document).scrollTop()>50){ 
            $("header").removeClass("large").addClass("small");
            $(".sidebar").removeClass("large").addClass("small");
            $(".right-content").removeClass("large").addClass("small");
            }
        else{
            $("header").removeClass("small").addClass("large");
            $(".sidebar").removeClass("small").addClass("large");
            $(".right-content").removeClass("small").addClass("large");
            }
        });
</script>

Answer 1

简单示例

您可以使用该代码检查checkbox是否为selected。

尝试添加else if逻辑以扩展 HEADER 。

else if(headerToggle.prop('checked')==false){

上面的内容会变得有些混乱。你最好的选择是编写一个新功能，以便对它进行故障保护，并确保你的滚动功能不会破坏它，如果他们愿意的话，这也会使它崩溃：

$(document).on("scroll",function(){
    var headerToggle = $('#headerToggle');
    if($(document).scrollTop()>50){ 
        $("#header").removeClass("large").addClass("small");
    }
    else if($(document).scrollTop()<=50){
        $("#header").removeClass("small").addClass("large");
    }
});
$('#headerToggle').on('click', function() {
    $('#header').toggleClass('small');
    $('#header').toggleClass('large');
});

如果没有更多代码，我无法提供更多指导。有很多方法可以解决这个问题。

Answer 2

这样的事，也许？

$(document).ready(function(){
    $(window).scroll(function(){
        var top = $(window).scrollTop();
        if (top > 50) {
            $('header').css({
                'height': '20px',
                'width': '20px',
                'overflow': 'hidden',
                '-webkit-transition': 'all .5s ease',
                '-moz-transition': 'all .5s ease',
                'transition': 'all .5s ease'
            });
            $('.menu a').fadeIn(500);
            $('header').addClass('min');
        } else {
            $('header').css({
                'height': '',
                'width': '',
                'overflow': '',
                '-webkit-transition': 'all .5s ease',
                '-moz-transition': 'all .5s ease',
                'transition': 'all .5s ease'
                }).removeClass('min');
            $('.menu a').fadeOut(500);
        }
    });

    $('.menu a').click(function(){
        if ($('header').hasClass('min')) {
            $('header').css({
                'height': '',
                'width': '',
                'overflow': ''
             }).removeClass('min');
        } else {
            $('header').css({
                'height': '20px',
                'width': '20px',
                'overflow': 'hidden',
                '-webkit-transition': 'all .5s ease',
                '-moz-transition': 'all .5s ease',
                'transition': 'all .5s ease'
            }).addClass('min');
        }

    });
});

这是一个小提琴：http://jsfiddle.net/unnhJ/1/

如果这是你所追求的，可以通过在变量/对象中存储重复的位来减少代码。

创建按钮以折叠标题（javascript）

2 个答案:

简单示例