Question

在下面的代码中，我无法在用户到达最后一段之前隐藏附加的div。 div在页面加载时显示正确，并且我希望仅在用户到达＆＃34; last＆＃34; ID。

$('body').append('<div id="optslidebox"></div>');

$(".slide-content > p").attr("id", "last");

window.scrollBox = function () {
    $(window).scroll(function () {
        /* when reaching the element with id "last" we want to show 
        the slidebox. Let's get the distance from the top to the element */
        var distanceTop = window.$('#last').offset().top - window.$(window).height();

        if (window.$(window).scrollTop() > distanceTop) {
            window.$('#optslidebox').animate({'right': '0px'}, 300);
        } else {
            window.$('#optslidebox').stop(true).animate({'right': '-430px'}, 100);
        }
    });

    /* remove the slidebox when clicking the cross */
    $('#optslidebox.close').bind('click', function () {
        $(this).parent().remove();
    });
};

Answer 1

问题来自变体代码。＆＃34;右＆＃34;被设置为＆＃34; 0px＆＃34; - 一旦将其更改为＆＃34; -999px＆＃34;一切都很好。这是最终的变体代码：

    window.scrollBox();
    $("#related-posts").css({"z-index":"1"});
    $("#optslidebox").replaceWith("<div id=\"optslidebox\" style=\"z-index:2; right: -999px;\">\n\t<a class=\"close\"></a>\n\t<p>Recommended</p>\n\t<h2>WHO ARE YOUR FAVORITE RAPPERS' FAVORITE RAPPERS RIGHT NOW?</h2>\n</div>");
    $("#optslidebox > h2").wrapInner("<a href=\"http://greenlabel.com/sound/rappers-who-skate-skaters-who-rap/\"></a>");

在Optimizely中隐藏附加的div

1 个答案: