How to make portion of website to be always visible/fixed at the bottom?

StackOverflow https://stackoverflow.com/questions/4124531

  •  29-09-2019
  •  | 
  •  

Question

I need to create simple toobar (divs and uls) with few anchors and few tabs. Position must be fixed to the bottom of the page.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .footerToolbar
        {
            font-size: 90%;
            margin: 20px 0;
            position: absolute;
            bottom: 0;
        }
        .footerToolbar ul
        {
            float: right;
            background: #E3FEFA;
            width: 600px;
            padding-top: 4px;
        }
        .footerToolbar li
        {
            margin-left: 8px;
            list-style: none;
        }
        * html .footerToolbar li
        {
            display: inline; /* ie6 double float margin bug */
        }
        .footerToolbar li, .footerToolbar li a
        {
            float: left;
        }
        .footerToolbar ul li a
        {
            text-decoration: none;
            padding: 8px;
            color: #0073BF;
            font-weight: bold;
        }
        .footerToolbar ul li.active
        {
        }
        .footerToolbar ul li.active a
        {
            color: #333333;
        }
        .footerToolbar div
        {
            background: #CEE1EF;
            clear: both;
            padding: 20px;
            min-height: 200px;
        }
        .footerToolbar div p
        {
            line-height: 150%;
        }
    </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('.footerToolbar div').hide(); // Hide all divs
            $('.footerToolbar div:first').show(); // Show the first div
            $('.footerToolbar ul li:first').addClass('active'); // Set the class of the first link to active
            $('.footerToolbar ul li a').click(function () { //When any link is clicked
                $('.footerToolbar ul li').removeClass('active'); // Remove active class from all links
                $(this).parent().addClass('active'); //Set clicked link class to active
                var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
                $('.footerToolbar div').hide(); // Hide all divs
                $(currentTab).show(); // Show div with id equal to variable currentTab
                return false;
            });

            if (navigator.userAgent.match('/MSIE [67]/i')) { //or other neater way to do this
                $(".footerToolbar").css("position", "absolute");
                $(window).scroll(function () {
                    var top = $(window).innerHeight() - $('.footerToolbar').height();
                    $(".footerToolbar").css("top", top + "px");
                });
            }
        });
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus mi at metus iaculis faucibus. Maecenas eget dolor a libero ullamcorper tincidunt. Mauris risus purus, consequat eget rhoncus ut, volutpat id urna. Mauris et arcu nec mauris aliquet volutpat. Nulla porta neque congue ante egestas ac rhoncus nisi lacinia. In vulputate elit a sapien egestas eget facilisis sem molestie. Curabitur nulla sapien, aliquet at aliquet eget, placerat vitae leo. Nam ultrices pulvinar consectetur. Nulla adipiscing velit quis nisl varius a ullamcorper ligula eleifend. Ut et lacus magna, in commodo purus. Nam tellus sem, imperdiet eu ultrices in, dignissim nec mauris. In eget urna ac nisi sodales feugiat. Duis commodo ullamcorper eros, id hendrerit massa dapibus et. Duis vulputate ipsum ac mi mattis elementum. Etiam tincidunt vulputate massa, faucibus ornare tortor dapibus sit amet. Phasellus vel enim et sem eleifend ornare.

Sed nec dolor non metus luctus molestie id non nulla. Aenean lacus velit, tincidunt vitae vehicula eu, tempus eget neque. Aliquam tincidunt neque at nisi imperdiet aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut aliquam, augue eu lacinia aliquam, augue felis lacinia urna, ut commodo nulla est id augue. Quisque sagittis blandit metus non egestas. Phasellus et velit sem, eu semper ipsum. Mauris magna enim, porttitor eget sagittis id, ullamcorper in felis. Nam ipsum sapien, accumsan eget vehicula a, pharetra et ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis, nunc non imperdiet blandit, quam neque ornare velit, nec dignissim elit purus eget magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dui dui, lacinia sed vulputate sed, auctor vitae ipsum. Vivamus congue mattis urna, sit amet tempus arcu molestie vehicula. Ut scelerisque augue lacus. Sed eu tortor est, et facilisis metus. Proin quis gravida elit. Aliquam erat volutpat. Nullam ac risus id elit porta blandit vel sit amet neque. Nam luctus pulvinar metus nec consequat.

Sed dapibus est sed nulla faucibus eget facilisis urna vestibulum. Ut fermentum interdum metus vitae accumsan. Mauris quis pharetra ante. Suspendisse dapibus vehicula quam eget aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc tristique pretium facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam blandit arcu vel lectus tristique sed accumsan sem consequat. Sed nec nibh elit, vitae dictum urna. Nullam sollicitudin placerat lacus sit amet faucibus. Curabitur ac eros purus.

Suspendisse ullamcorper felis pellentesque urna porttitor non sodales sapien elementum. Aenean lacinia massa eu nunc egestas sollicitudin. Praesent sed orci quis mauris sollicitudin tristique semper nec lacus. Ut lectus dui, placerat non malesuada id, scelerisque in neque. Vivamus vitae mauris leo, sed laoreet tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam lorem arcu, tincidunt a mattis ullamcorper, pretium vitae mauris. Donec ut erat rhoncus magna consectetur mollis sed id diam. Vivamus pretium, risus sit amet consequat consequat, ligula purus pretium nisi, a iaculis est magna at nunc. Suspendisse potenti. Nullam vitae ligula nec dolor vestibulum malesuada et eget nulla. Nulla placerat dolor a turpis sagittis a commodo sapien mollis.

Nunc imperdiet elementum justo, a viverra leo semper ut. Sed ut est nec diam posuere rhoncus nec eu nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla congue, dui a tempus dapibus, mi lacus congue diam, elementum dictum nibh justo et lacus. Aenean eu nisi dui. Vestibulum vel semper lectus. Nulla nec elit lobortis augue feugiat hendrerit. Cras tincidunt nibh nec purus auctor accumsan. Cras eleifend velit nec mi adipiscing eget facilisis risus bibendum. Aenean egestas nisl at tortor sollicitudin commodo. Quisque fermentum lorem quis augue lobortis nec dignissim justo congue. Vestibulum vel magna sapien, sed vehicula dolor. Sed consectetur porta elementum. Curabitur convallis euismod leo at malesuada. Etiam lacinia mollis faucibus. In tempus nunc vitae magna viverra vulputate. Praesent interdum leo at nunc rutrum convallis.

Nunc suscipit sollicitudin tortor id ultrices. Aliquam viverra libero et quam congue sollicitudin. Cras eleifend hendrerit risus at scelerisque. Aliquam erat volutpat. Nulla congue hendrerit enim, nec commodo purus scelerisque nec. Aliquam urna nisl, ultrices volutpat posuere a, vulputate at ligula. Suspendisse elementum tincidunt turpis, eget aliquet mauris tempus quis. Fusce ut felis a augue cursus molestie ut vitae leo. Maecenas felis nulla, adipiscing eu mollis sed, pulvinar nec risus. Suspendisse pharetra gravida lacus at imperdiet. Maecenas in eros quis magna molestie rutrum non rhoncus lorem. Fusce eget cursus enim. In accumsan erat vitae leo viverra facilisis. Vivamus sed elementum eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent consequat tincidunt est, non venenatis felis commodo eget. Donec convallis tempus porttitor. Mauris ipsum sem, pretium id ullamcorper viverra, egestas id diam. Nunc id tortor quis libero lobortis blandit et a purus.

Nullam blandit est ullamcorper ligula pulvinar auctor. Integer et dolor a neque elementum ornare eget et tellus. Ut sapien lacus, semper et placerat vitae, scelerisque convallis orci. Curabitur magna odio, blandit a scelerisque ut, tincidunt at lacus. Suspendisse tristique dictum metus quis semper. Proin tellus lacus, viverra sit amet volutpat id, facilisis non nunc. Maecenas placerat bibendum elit, ac interdum diam tristique ac. Sed sem dolor, adipiscing in pretium non, lacinia eu turpis. Praesent sit amet purus velit, sed commodo est. Aliquam erat volutpat. Ut cursus vestibulum tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Suspendisse ac augue libero. Integer dignissim imperdiet metus quis fringilla. Nulla quis dolor tortor. Vivamus malesuada lorem et erat luctus tristique. Maecenas convallis condimentum felis, ac sodales eros aliquet pellentesque. Nulla laoreet vulputate dui, vel convallis elit tincidunt quis. Phasellus nec tellus ut enim convallis consectetur. Vestibulum scelerisque pellentesque tortor quis porttitor. Nam convallis velit ac arcu fermentum consequat. Duis congue sodales leo a euismod. Curabitur hendrerit posuere neque, et viverra sapien porta ac. Vestibulum nisi nibh, molestie vel euismod commodo, pharetra sit amet nisi. Etiam gravida pulvinar commodo. Morbi quis dui tellus, sed dignissim dolor. Fusce mollis pharetra euismod. Nunc bibendum tristique urna, vel egestas erat tristique vel. Praesent sodales lacus a justo hendrerit dapibus. Integer semper eros non est auctor interdum. Cras scelerisque varius tristique. Pellentesque leo risus, consequat ac euismod a, scelerisque nec quam.
    </div>
    <div class="footerToolbar">
        <ul>
            <li><a href="#tab-1">tab 1</a></li>
            <li><a href="#tab-2">tab 2</a></li>
            <li><a href="#tab-3">tab 3</a></li>
            <li><a href="#tab-4">tab 4</a></li>
            <li><a href="#tab-5">tab 5</a></li>
        </ul>
        <div id="tab-1">
            <p>Some content 1</p>
        </div>
        <div id="tab-2">
            <p>Some content 2</p>
        </div>
        <div id="tab-3">
            <p>Some content 3</p>
        </div>
        <div id="tab-4">
            <p>Some content 4</p>
        </div>        
        <div id="tab-5">
            <p>Some content 5</p>
        </div>
    </div>
    </form>
</body>
</html>

thanks...

Was it helpful?

Solution

Here we go!

.toolbar{ position:fixed;bottom:0;height:30px;width:100%:}

<div class="toolbar">
...
</div>

Note: this works only on browsers that supports position:fixed css, surely this will not work on IE6 and IE7 but you do the workaround using javascript.

UPDATE:

$(document).ready(function() {
    if(navigator.userAgent.match(/MSIE [67]/i)){ //or other neater way to do this
        $(".toolbar").css("position", "absolute");
        $(window).scroll(function() {
            var top = $(window).innerHeight() - $('.toolbar').height();
            $(".toolbar").css("top", top + "px");
        });
    }
});

OTHER TIPS

Add the following 'floating' class to your css and then apply it to your floating element:

.floating {
position:absolute;bottom:0;
}

I tried many sticky footer techniques but found this one to work great:

It also works perfectly with IE6 (I see this is a requirement for you).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top