javascript - 使用 jQuery 在页面上 float DIV

Question

我有一个关于 float div 的问题。我想让 div 在用户到达时沿着页面滚动。换句话说:这个 div 是静态的，位于页面的左侧。当用户滚动它并到达页面顶部时，div 变得可滚动并随浏览器 float ，但是当用户向上滚动时，div 滚动到其第一个位置而不是更高。这是我的代码，我无法初始化它并且 jQuery 无法工作。我试图在将 div 放入表格的页面中制作 float div。代码:

// v0.1 
// Nustatymai þemiau

var dclk_ban_file = "SOURCE";
var dclk_bck_gif = "";
var dclk_ban_width = 300;
var dclk_ban_height = 600;
var dclk_click_url = "%%__REDIRECT%%";

// Kodas zemiau. Nekisti nagu

dclk_ban_file = dclk_ban_file.replace(/http\:|https\:/, (document.location.protocol == "https:" ? "https:" : "http:")); // Fixiname https problema
dclk_bck_gif = dclk_bck_gif.replace(/http\:|https\:/, (document.location.protocol == "https:" ? "https:" : "http:")); // Fixiname https problema

var ShockMode = 0;
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if (plugin)
{
    var dcfl = plugin.description.split(' ');
    var dcct;
    for (dcct = 0; dcct < dcfl.length; dcct++) {
        if (!isNaN(dcfl[dcct])) {
            if (parseInt(dcfl[dcct]) >= 6)
                ShockMode = 1;
            break;
        }
    }
    ;
}
else if ((navigator.userAgent && navigator.userAgent.indexOf("MSIE") >= 0) && (navigator.userAgent.indexOf("Windows 95") >= 0 || navigator.userAgent.indexOf("Windows 98") >= 0 || navigator.userAgent.indexOf("Windows NT") >= 0))
{
    document.write('<scr' + 'ipt language="VBScript"> \n');
    document.write('on error resume next \n');
    document.write('ShockMode = (Isobject(Createobject("ShockwaveFlash.ShockwaveFlash.6")))\n');
    document.write('<\/scr' + 'ipt>\n');
}

var fileType = dclk_ban_file.substring(dclk_ban_file.length - 3).toLowerCase();

if ((ShockMode && fileType == "swf") || (fileType == "swf" && getInternetExplorerVersion() >= 8.0)) {
    dclk_crea1 = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="banner" width="' + dclk_ban_width + '" height="' + dclk_ban_height + '"><param name="movie" value="' + dclk_ban_file + '?clickTag=' + dclk_click_url + '" /><param name="wmode" value="opaque" /><param name="Autostart" value="true" /><param name="Quality" value="high" /><param name="allowScriptAccess" value="always" /><embed wmode="opaque" src="' + dclk_ban_file + '?clickTAG=' + dclk_click_url + '" swLiveConnect="TRUE" width="' + dclk_ban_width + '" height="' + dclk_ban_height + '" type="application/x-shockwave-flash" pluginspage="' + document.protocol + '//www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="high" allowScriptAccess="always"><\/embed><\/object>';
} else {
    dclk_crea1 = '<a href="' + dclk_click_url + '" target="_blank"><img src="' + dclk_ban_file + '" border="0" width="' + dclk_ban_width + '" height="' + dclk_ban_height + '" alt="Daugiau..." galleryimg="no"><\/a>';
}

if (document.all || navigator.userAgent.indexOf('Gecko') > 0) {
    document.write('<div id="dclk_banner" style="position:relative; top:0px; left:0px; width:' + dclk_ban_width + 'px; height:' + dclk_ban_height + 'px; visibility:visible;  z-index:99998;>');
    document.write(dclk_crea1);
    document.write('<\/div>');
    dclk_div = document.getElementsByTagName("div");
}
else {
    document.write(dclk_crea1);
}



function getInternetExplorerVersion() {
    var rv = -1; // Return value assumes failure. 
    if (typeof (document.documentMode) != "undefined")
        rv = Number(document.documentMode);

    return rv;
}

var t = $("#dclk_banner").offset().top;

$(document).scroll(function () {
    if ($(this).scrollTop() > t)
    {
        $("#dclk_banner")
                .css('position', 'fixed') //we change the position to fixed
                .css('top', 0); // and the top to zero
    } else {
        $("#dclk_banner")
                .css('position', 'static') //we change the position to fixed
                .css('top', 0); // and the top to zero
    }
});

document.write('<script type="text/javascript" src="' + document.location.protocol + '//code.jquery.com/jquery-1.11.2.min.js?cacheBust=' + ((new Date()).getTime()) + '"><\/script>');

Answer 1

这是一个重复的问题。看这里:

jQuery scroll then fixed

http://jsfiddle.net/tb2ume6v/1/

var main = function(){
    var menu = $('#menu')

    $(document).scroll(function(){
        if ( $(this).scrollTop() >= $(window).height() - menu.height() ){
        menu.removeClass('bottom').addClass('top')
        } else {
        menu.removeClass('top').addClass('bottom')
        }
    })
}
$(document).ready(main);