Sticking a div using Javascript issue(s)

I am trying to get my right hand column div to scroll down and I am having some problems, I have tried by using position:fixed; but I would prefer it to remain stationary until it is scrolled past.

<script type="text/javascript">
$(document).ready(function() {
    var s = $(".rightcol_infobox");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});
</script>

looked pretty close to what I wanted however it doesnt seem to work. here is some of the css im using:

div.rightcol_infobox {
float:left;
margin-left:20px;
margin-top:20px;
width:283px;
padding:0px 2px 10px 2px;
background-color:#eee;
border-radius:10px
}
div.mainpage {
float:left;
clear:left;
min-width:1000px;
overflow:visible;
margin:20px 0px 0px 0px;
}
div.maincontent {
float:left;
clear:left;
width:670px;
margin-top:20px;
}
.stick {
    position:fixed;
    top:0px;
}

HTML:

<!-- Right-column -->
<div class="rightcol_infobox">

<script SRC="../general/Socials_Techauth.js"></script>

<div class="infobox rounded">
<P class="infoboxheading">Enquiries</p>
<p class="leftcol_text">Enquire about our technical authoring services<A href="..\enquiry\enquirytechnicalauthoring_sb.htm" rel="shadowbox;width=400;height=450"> Click here</a></p>
</div>

<div class="infobox rounded">
<P class="infoboxheading">See also</p>
<p class="leftcol_text">Why use Armada to write your online help and user guides? <A href="whyusearmada.htm"> Click here</a></p>
<script SRC="../general/socials2_techauth.js"></script>

</div>


</div>

i have been at this for a couple of days now and can't seem to crack it http://jsfiddle.net/dHW6b/1/

Answers


You can do this using below code.

CSS

#fl_menu{position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;}
#fl_menu .label{padding-left:20px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px;}
#fl_menu .menu{display:none;}
#fl_menu .menu .menu_item{display:block; background:#000; color:#bbb; border-top:1px solid #333; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none;}
#fl_menu .menu a.menu_item:hover{background:#333; color:#fff;}
.content{width:520px; margin:50px auto;}

HTML

<div id="fl_menu">
    <div class="label">MENU</div>
    <div class="menu">
        <a href="#" class="menu_item">ONE</a>
        <a href="#" class="menu_item">SECOND</a>
    </div>
</div>

jQuery Code

$float_speed         = 1500;
$float_easing        = "easeOutQuint";
$menu_fade_speed     = 500;
$closed_menu_opacity = 0.75;

$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");

$(window).load(function()
{
    menuPosition=$('#fl_menu').position().top;
    FloatMenu();
    $fl_menu.hover
    (
        function()
        {
            $fl_menu_label.fadeTo($menu_fade_speed, 1);
            $fl_menu_menu.fadeIn($menu_fade_speed);
        },
        function()
        {
            $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
            $fl_menu_menu.fadeOut($menu_fade_speed);
        }
    );
});

$(window).scroll(function ()
{
    FloatMenu();
});

function FloatMenu()
{
    var scrollAmount=$(document).scrollTop();
    var newPosition=menuPosition+scrollAmount;
    if($(window).height()<$fl_menu.height()+$fl_menu_menu.height())
    {
        $fl_menu.css("top",menuPosition);
    }
    else
    {
        $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
    }
}

Do not forget to add jQuery and jQuery.easing libs.

And you are done.


Need Your Help

Entity Framework - How best to handle large numbers of entities

entity-framework linq-to-sql

We're currently a Linq to SQL shop but evaluating Entity Framework. One thing that always frustrated me with L2S is how messy the DBML canvas became after putting more than say a couple dozen table...

No extra logging in the console with log4j

spring spring-mvc logging log4j

I'm new at this logging stuff and i want see logging from spring to see all the beans created.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.