javascript - 在 JavaScript 中查找其他关系

Question

我有一个大函数，其中有许多其他函数，(但我不能拥有所有这些函数，因为我的其他脚本出错)因此我只需要执行我需要的操作的函数；最近我被帮助找到了一个功能，但我认为它缺少其他隐藏内容并显示我需要的按钮的功能。当我运行脚本时效果很好，但没有显示按钮，并且当您返回到初始位置时也没有隐藏该栏。我测试大脚本只是为了知道是否有我的错误，基本上是的。

您可以在这里找到这个大脚本以及我正在尝试做的示例 See the code and example

您可以看看我在这张图片上尝试执行的操作以及问题: See Picture of the problem

我当前的脚本是这样的，效果很好，但错过了大脚本中的两个细节。请帮助我。

// JavaScript Document

;
jQuery(document).ready(function () {
    "use strict";
    jQuery(window).scroll(function () {
        var scrollTop = jQuery(window).scrollTop();
        var docHeight = jQuery(document).height();
        var winHeight = jQuery(window).height();
        var scrollPercent = (scrollTop) / (docHeight - winHeight);
        var scrollPercentRounded = Math.round(scrollPercent * 100);
        jQuery('#post_indicator').css('width', scrollPercentRounded + '%');
    });
    jQuery(window).scroll(function () {
        if (jQuery('#pp_fixed_menu').val() == 1)

        {
            if (jQuery(this).scrollTop() >= 200) {
                jQuery('.header_style_wrapper .above_top_bar').hide();
                jQuery('.extend_top_contact_info').hide();
                jQuery('.top_bar').addClass('scroll');
                jQuery('#post_info_bar').addClass('scroll');
            } else if (jQuery(this).scrollTop() < 200) {
                jQuery('.header_style_wrapper .above_top_bar').show();
                jQuery('.extend_top_contact_info').show();
                jQuery('#custom_logo img').removeClass('zoom');
                jQuery('#custom_logo img').css('maxHeight', '');
                jQuery('#custom_logo').css('marginTop', parseInt(logoMargin) + 'px');
                jQuery('#menu_wrapper div .nav > li > a').css('paddingTop', menuPaddingTop + 'px');
                jQuery('#menu_wrapper div .nav > li > a').css('paddingBottom', menuPaddingBottom + 'px');;
                jQuery('.top_bar').removeClass('scroll');
                jQuery('#post_info_bar').removeClass('scroll');
            }
        } else {
            if (jQuery(this).scrollTop() >= 200) {
                jQuery('.header_style_wrapper').addClass('nofixed');
            } else {
                jQuery('.header_style_wrapper').removeClass('nofixed');
            }
        }
    });

});

Answer 1

如果你想显示按钮(箭头)，你需要将其添加到你的 html 中，然后你可以使用这个脚本:

<!-- language: lang-js -->

// JavaScript Document

;
jQuery(document).ready(function() {
    "use strict";
    jQuery(window).scroll(function() {
        var scrollTop = jQuery(window).scrollTop();
        var docHeight = jQuery(document).height();
        var winHeight = jQuery(window).height();
        var scrollPercent = (scrollTop) / (docHeight - winHeight);
        var scrollPercentRounded = Math.round(scrollPercent * 100);
        jQuery('#post_indicator').css('width', scrollPercentRounded + '%');
    });



     jQuery(window).scroll(function() {
        var calScreenWidth = jQuery(window).width();
        if (jQuery(this).scrollTop() > 200) {
            jQuery('#toTop').stop().css({
                opacity: 0.5,
                "visibility": "visible"
            }).animate({
                "visibility": "visible"
            }, {
                duration: 1000,
                easing: "easeOutExpo"
            });
        } else if (jQuery(this).scrollTop() == 0) {
            jQuery('#toTop').stop().css({
                opacity: 0,
                "visibility": "hidden"
            }).animate({
                "visibility": "hidden"
            }, {
                duration: 1500,
                easing: "easeOutExpo"
            });
        }
    });
    jQuery('#toTop, .hr_totop').on('click', function() {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
    });


    jQuery(window).scroll(function() {
        if (jQuery('#pp_fixed_menu').val() == 1)

        {
            if (jQuery(this).scrollTop() >= 200) {
                jQuery('.header_style_wrapper .above_top_bar').hide();
                jQuery('.extend_top_contact_info').hide();
                jQuery('.top_bar').addClass('scroll');
                jQuery('#post_info_bar').addClass('scroll');
            } else if (jQuery(this).scrollTop() < 200) {
                jQuery('.header_style_wrapper .above_top_bar').show();
                jQuery('.extend_top_contact_info').show();
                jQuery('#custom_logo img').removeClass('zoom');
                jQuery('#custom_logo img').css('maxHeight', '');
                jQuery('#custom_logo').css('marginTop', parseInt(logoMargin) + 'px');
                jQuery('#menu_wrapper div .nav > li > a').css('paddingTop', menuPaddingTop + 'px');
                jQuery('#menu_wrapper div .nav > li > a').css('paddingBottom', menuPaddingBottom + 'px');;
                jQuery('.top_bar').removeClass('scroll');
                jQuery('#post_info_bar').removeClass('scroll');
            }
        } else {
            if (jQuery(this).scrollTop() >= 200) {
                jQuery('.header_style_wrapper').addClass('nofixed');
            } else {
                jQuery('.header_style_wrapper').removeClass('nofixed');
            }
        }
    });

});

当你向上滚动时，该栏不再隐藏？我在这里用这个小脚本进行测试，当我向上滚动时它会隐藏它