CODEWITHSUNDEEP
javascriptjqueryscrollfloating
Pandemum
Pandemum

Reputation: 53

Floating DIV on the page using jQuery

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

Upvotes: 0

Views: 2804

Answers (1)

Adrian Roworth
Adrian Roworth

Reputation: 823

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

Upvotes: 1

Related Questions