Question

我使用Three tabs设计我的应用程序。我编码就像一个标签包含超过窗口大小的数据，如果用户滚动页面，三个标签是固定的，它不会滚动。只会滚动数据。在这，我的问题是，如果我尝试向下滚动选项卡。它影响了所有标签。这是我用于滚动的Jquery代码

$(window).scroll(function(e) {
    // Get the position of the location where the scroller starts.
    var scroller_anchor = $(".scroller_anchor").offset().top;
    // Check if the user has scrolled and the current position is after the scroller's start location and if its not already fixed at the top 
    if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') !=  'fixed') {
        // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
        $('.scroller').css({
            'background': '#FFF',
            'border': '0px solid #000',
            'position': 'fixed',
            'top': '0px'
        });
        // Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
        $('.scroller_anchor').css('height', '50px');
    } else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative') {
        // If the user has scrolled back to the location above the scroller anchor place it back into the content.
        // Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
        $('.scroller_anchor').css('height', '0px');

        // Change the CSS and put it back to its original position.
        $('.scroller').css({
            'background': '#FFF',
            'border': '0px solid #CCC',
            'position': 'relative'
        });
    }
});

请帮帮我。如果用户滚动一个标签，则另一个标签应位于其实际位置。它不应该在滚动位置..任何人帮助我。提前致谢

Answer 1

在讨论评论之后，你似乎必须在新选项卡上绑定一个点击，重置其他标签的滚动状态，可能是这样的吗？

var resetScrollingStateOnOtherTabs = function () {
    $('.tabs:not(.active)').css({
        // [...]
    });
}

$('.tabs').on('click', function (e) {
    // Add a class to the clicked tab
    // ONLY IF THERE IS NOT ALREADY ONE !
    // The goal of this is only to separate the CSS rules...
    $('.tabs').removeClass('active');
    $(this).addClass('active').css({
        // [...]
    });
    resetScrollingStateOnOtherTabs();
});

在html中的标签菜单中管理滚动中的问题

1 个答案: