使用非 javascript 浏览器支持在滚动时显示特定 div

Question

我正在尝试修改以下脚本，以使其对禁用 Javascript 的用户更友好。下面的代码在滚动位置将所有 div 的不透明度设置为 0 和 1。我想通过手动添加类'hideme'来隐藏特定的div并在滚动时显示它们。

$(document).ready(function() {

/* Hide all elements outside the visible window */
$('body *').each( function(){

    var top_of_object = $(this).position().top;
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    if( bottom_of_window < top_of_object  ){

        $(this).addClass('hideme').css({'opacity':'0'});

    }

});

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of the desired elements */
    $('.hideme').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();


            if( bottom_of_window > ( bottom_of_object + 20 )  ){

                $(this).removeClass('hideme').animate({'opacity':'1'},500);

            }

    }); 

});

 });

我想出了如何指定选定的 div，只需更改以下代码

$('body *').each(function(){

到

$('.div-class,.another-div-class').each(function(){

Answer 1

正如 Anthony 在 cmets 中所指出的，如果用户禁用了 JavaScript，那么该代码将完全执行，因为它本身就是 JavaScript。

您可能需要颠倒您的逻辑并构建您的 HTML 页面，这样就可以不用 JavaScript使用 JavaScript。

我倾向于（但我知道我会被所有非 JS 人员发起）还指出你需要权衡少数非 Javascript 人员是否值得付出额外的时间和精力带你去，或者你是否可以使用我们的朋友<noscript>标签告诉他们你网站的某些部分需要JavaScript才能正确显示。当然，让您的网站优雅降级是一种很好的做法，但请记住，让网站真正正常运行可能比确保每个案例都适用于每个人更重要。我见过太多人陷入试图取悦所有人的陷阱，却从未真正发布他们的产品！

我知道这并不能真正给你任何可靠的答案，但这对你来说可能是一个很好的起点。