End Toolbar Scrolling at a Point

View previous topic View next topic Go down

avatar
Syfte
Member
Member
Forum Posts : 17
Member Since : 2012-02-15
View user profile

PostSyfte on 17/2/2012, 8:27 pm

So I've got this toolbar that scrolls with the page.

But sometimes the page doesn't extend to the bottom of the window and the toolbar just sits there at the bottom.

Is there a way to have the toolbar stop scrolling at a certain point, like this?

Thanks in advance, and if not, thanks for your time.
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 18/2/2012, 6:00 am

Here's some jQuery:

Code:
$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $('window');

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);

Change #yourDiv to the div it is, and 250 to the pixels before it stops.
avatar
Syfte
Member
Member
Forum Posts : 17
Member Since : 2012-02-15
View user profile

PostSyfte on 18/2/2012, 11:22 am

The div for the toolbar? Don't know if this is right. I've got this under announcements.
Code:
<!----Toolbar Scroll---->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript">
    $.fn.followTo = function ( pos ) {
        var $this = this,
            $window = $('window');

        $window.scroll(function(e){
            if ($window.scrollTop() > pos) {
                $this.css({
                    position: 'absolute',
                    top: pos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        });
    };

    $('#myfooter').followTo(7);
        </script>

<!-----Toolbar----->
<div id="myfooter" ><div align="left" style="top: 47px; left: 7px; position: relative; z-index: 4;"><script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="tumblr counter"
href="http://statcounter.com/tumblr/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/6408393/0/fed6414d/0/"
alt="tumblr counter" ></a></div></noscript>
<!-- End of StatCounter Code --></div><div align="center" style="top: 2px; position: relative; z-index: 3;">
<a href="http://spotfeed.forumotion.com/forum.htm"><img src="http://i54.tinypic.com/2a5hxts.jpg" title="Home" border="0" style="opacity:0.7;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"></a>
<a href="http://spotfeed.forumotion.com/chatbox/chatbox.forum?" target="_blank"><img src="http://i54.tinypic.com/14szg29.jpg" title="Chatbox" border="0" style="opacity:0.7;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"></a>
<a href="http://spotfeed.forumotion.com/Spotfeed-Rules-h5.htm"><img src="http://i55.tinypic.com/11udtg5.jpg" title="The Rules" border="0" style="opacity:0.7;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"></a>

</div><div align="right" style="top: -22px !important; position: relative; z-index: 3;"><a href="http://spotfeed.forumotion.com/Credits-h2.htm" target="_blank" style=" font-family: Helvetica, Arial, Trebuchet MS; font-color: #FFFFFF !important;"><img src="http://i77.servimg.com/u/f77/15/67/55/98/copyri11.png" alt="Credits" border="0"></a>
</div></div>
avatar
Vanilla990
Administrator
Forum Posts : 114
Member Since : 2011-10-30
View user profile

PostVanilla990 on 18/2/2012, 1:20 pm

would adding a clear function not work if the code has been added to the overall footer?
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum