0

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/

4
  • post your html. or create a Fiddle. Aug 23, 2013 at 10:44
  • create a fiddle please. Aug 23, 2013 at 10:44
  • @AvinVarghese "Javascript" not "JavaScript" :)
    – Mr_Green
    Aug 23, 2013 at 10:48
  • added the html sorry thought I put it at the top
    – George
    Aug 23, 2013 at 10:57

1 Answer 1

0

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.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.