jquery window.onscroll display:none 和 display:inline 的监听器未出现在 Safari 中

Question

我正在 Safari 11.0.3 中测试

站点：https://3milychu.github.io/met-erials

我有以下功能来创建 header 滚动时弹出所选项目

function scrollState () {


var elmnt = document.getElementById("title");
var rep = elmnt.offsetTop;

if (window.pageYOffset >= elmnt.offsetHeight) { 
       // $('input:not(:checked').parent().hide();
       $('input:not(:checked').parent().css("display","none");
       $("input:checked").css("display", "inline");
        $("label").css("marginLeft", "35%");
       $("label" ).css("fontSize", "4em");
       $("label" ).css("textAlign", "center");
       $("input:checked").css("float", "none");
        $("input:checked").css("verticalAlign", "top");
       $("input[type=radio]").css("width", "3em");
       $("input[type=radio]").css("height", "3em");
        $("input:checked").css("fontSize", "0.5em");
} else  {
        $("input:checked").css("display", "inline")
        $("label").css("marginLeft", "0%");
        $("label" ).css("textAlign", "none");
       $("input:checked").css("float", "right");
       $("input[type=radio]").css("width", "2em");
       $("input[type=radio]").css("height", "2em");
        $("input:checked").css("fontSize", "11px");
        // $('input:not(:checked').parent().show();
        $('input:not(:checked').parent().css("display","inline-block");
        $("label").css("fontSize", "1.5em");

    };
};

我这样称呼它：

window.onscroll = function() {scrollState()};

为什么这在 Safari 中不起作用？在看到 Safari 需要将其替换为 .css("display","none").

后，我注释掉了 .hide() 方法

这可以根据需要在 Chrome 和 Firefox 中使用（当您使用 .hide() 和 .show() 方法时）

Answer 1

您的 $('input:not(:checked').parent().css("display","none");（替换 .show() 的那个）需要是 ('display', 'inline-block')？您希望元素显示，但您写的是 ('display', 'none')

Answer 2

存在语法错误。

$('input:not(:checked').parent().css("display","inline-block");

应该是

$('input:not(:checked)').parent().css("display","inline-block");

这解决了问题。

jquery window.onscroll display:none 和 display:inline 的监听器未出现在 Safari 中

jquery window.onscroll listener to display:none and display:inline not appearing in Safari

javascript

jquery

hide

scrolltop

onscroll

jquery window.onscroll display:none 和 display:inline 的监听​​器未出现在 Safari 中

jquery window.onscroll listener to display:none and display:inline not appearing in Safari

javascript

jquery

hide

scrolltop

onscroll

jquery window.onscroll display:none 和 display:inline 的监听器未出现在 Safari 中