Floating DIV on the page using jQuery

Question

I have a question regarding floating div. I want to make the div scroll along the page when user reaches it. In other words: this div is static at the left side of the page. When user scrolls it and reaches the top of the page, the div becomes scrollable and floats with the browser, but when user scrolls upwards the div scrolls until its first position not higher. Here is my code, i am not able to initialize it and jQuery is not working. I am trying to make floating div in the page where the divs are placed into the table. The code:

// 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>');

It sounds like [Bootstrap affix](http://getbootstrap.com/javascript/#affix) does exactly what you're trying to develop. Why not start by looking there? — Jon Surrell, Apr 07 '15 at 10:41
Maybe it is because you include the jQuery itself after you calling $-selector? Put `` in the very beginning of your code. Otherwise wrap your main code in the `load` event listener. — YuS, Apr 07 '15 at 10:42

score 1 · Accepted Answer · edited May 23 '17 at 12:22

This is a duplicate question. Look here:

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);

Floating DIV on the page using jQuery

1 Answers1