I need to clean up the interface a little. I would like to remove the need to specify the limit if it is just going to be the same as the element's top anyway. Also, setting a greater-than-zero bottom causes a jump when the element goes unfixed. I don't know that anyone would want to set a greater-than-zero bottom, so that might need to go too.

Hello,

I am trying to setup your plugin on a page with the following structure:

• Page consists of sections with photos.
• Each section has date marker, to which I apply your ScrollToFixed.

After ajax load of new sections, I want to call a callback function registering new date markers, which are within corresponding sections, that appeared on the page. After reading entire README file, I think the only possible solution for this would be to remove ScrollToFixed from all date markers by $('.section').trigger('remove');and then re-apply ScrollToFixed on all markers: old + just appeared. The removal is needed, because duplication of events registrations will occur otherwise. Am I right in my thoughts here?

It seems unhandy and unintuitive to somehow separate old .section elements from the ones that have just appeared and call scrollToFixed only on new elements, that's why I am asking:

1. Is there a possibility to know, whether scrollToFixed() was applied to a particular element thus having possibility to summon ScrollToFixed only on new ones?
2. Or is there a possibility to apply scrollToFixed more than once on the same element and not to run into duplication of events registration?

As for me, the first option seems better to have when working with page, which structure is being Ajax-changed.

Thanks. And... thank you for your work on this nice plugin.

Right now my workaround is to set the z-index for each element but it's hacky and dirty:

http://jsfiddle.net/wd3Yp/

sctollToFixed is awesome! Ive found one issue/bug however. If you have an expanding div inside your content, the script will not account for the new height when the div is expanded, so it will awkwardly stop being fixed in the 'middle' of your page (it assumes the end point was at the offset().top when the div was not expanded).

Ive made a fiddle to demonstrate: http://jsfiddle.net/ZczEt/494/

If you scroll the footer bar is perfectly as it should be. However, if you click on the red text to expand that div, and then try scrolling you will notice the footer jumps down much sooner then it should and the summary fixes prematurely (they are calculated based on the non-expanded)

The ideal solution would be to somehow calculate in realtime the height? Alternatively some call to refresh the values that could be used whenever a div is expanded?

I'm trying to get page to stop with distance above the anchored element. You can see here: http://dallaspetersdesign.com/client/sironia1/#synopsis that I would like the title to be visible when the page scrolls.

Thanks for the help.

The map was fixed positioned at top: 0 and left: 0, leaving from its original element when scrolling back up.

When the element is in a fixed position, with text that has scrolled under it, you will see the text underneath poke out for a split second while the element is moved to match the horizontal scroll bar. I don't know if there is anything that can be done about this, and this could be why no one else seems to be doing this.

When the element is on its own, with nothing right against it (like a shopping cart div), it performs fine.

Hello,

The scrolling sidebar div is jumping out of the main container after scrolling a certain distance. (Jumps from absolute position to fixed)

It was fine until updating to the newest version of scrolltofixed.js...

Please advise. Thank you!

Code:

$(document).ready(function() {
$('#masthead').scrollToFixed({
preFixed: function() { $(this).find('h1').css('color', ''); },
postFixed: function() { $(this).find('h1').css('color', ''); }
});
$('#sticky').scrollToFixed({
marginTop: $('#masthead').outerHeight() + 10,
limit: $('.footer').offset().top - $('#masthead').outerHeight() - 10,
zIndex: 999,
postFixed: function() { $(this).find('.title').css('color', ''); },
postAbsolute: function() { $(this).find('.title').css('color', ''); }
});
$('#footer').scrollToFixed( {
bottom: 0,
limit: $('#footer').offset().top,
preFixed: function() { $(this).find('h1').css('color', ''); },
postFixed: function() { $(this).find('h1').css('color', ''); }
});
});​

    <div id="content">
        <div>
            <div id="left">
            </div>
            <div id="right">
                <div id="sticky">
                    <li class="title">Summary</li>
                    <li class="contents">
                        <p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse.</p><p>Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient.</p><p>Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p>
                    </li>
                </div>
            </div>
        </div>
    </div>


    <div id="footer">
        <h1>Footer</h1>
    </div>

The ScrollToFixed example of the footer not working if the div which is above the footer is dynamically rendered using AJAX and Mustache renderer.
Can you help me solving this?

I want to create the simplest page layout reproducing the behavior I need for my app.

Now I can't manage how to make ScrollToFixed work properly on it.

It adds left: css property giving marker element wrong offset when it shouldn't do any offset at all.

Could you please review the follwoing html page and give me a hint, what is missing in its setup?

<!DOCTYPE html>
<html>
  <head>

    <meta charset='utf-8'>
    <title> *** TEST ***</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed.js" type="text/javascript"></script>

    <style type="text/css">
      .wrapper {
        width: 500px;
        margin: 0 auto;
        position: relative;
      }
      .marker {
        margin: 0 auto;
        width: 200px;
        height: 105px;
        text-align: center;
        font-size: 20px;
        line-height: 200%;
        border: 1px solid #fff;
      }
      .section {
        margin: 20px 0;
        text-align: center;
        font-size: 40px;
        line-height: 200%;
        height: 800px; 
      }
      .v1 { background-color: #0000FF; }
      .v2 { background-color: #6600FF; }
      .v3 { background-color: #6600CC; }
      .v4 { background-color: #660099; }
      .v5 { background-color: #660066; }
    </style>

    <script>
      $(function() {
        var collection = $('.marker');
        $.each(collection, function(index, value) {
          if (index == collection.length - 1) {
            $(value).scrollToFixed({
              //marginTop: 16,
            });
            } else {
            var nextIndex = index + 1;

            $(value).scrollToFixed({
              //marginTop: 16,
              limit: $(collection[nextIndex]).offset().top 
            });
          }
        });
      });
    </script>

  </head>
  <body>
    <div class="wrapper">

      <div class="marker v1">marker 1</div>
      <div class="section v1">section 1</div>

      <div class="marker v2">marker 2</div>
      <div class="section v2">section 2</div>

      <div class="marker v3">marker 3</div>
      <div class="section v3">section 3</div>

      <div class="marker v4">marker 4</div>
      <div class="section v4">section 4</div>

      <div class="marker v5">marker 5</div>
      <div class="section v5">section 5</div>  

    </div>
  </body>
</html>

I want to unbind scrollToFixed.

Now I do it like this:

$(el).unbind('.ScrollToFixed').removeData('ScrollToFixed');
$(window).unbind('.ScrollToFixed');

Is it possible to do this more shorter like

$(el).scrollToFixed('unbind');

I'm trying to make a div fixed in larger windows and not fixed when the window is resized below a certain width. I used the code below, and it works when the page is initially loaded, but not when the window is resized from large to small. Is there a better way to do this?

    $(function(){
    $(window).resize(function(){
        if($(this).width() >= 768){
        $('#info').scrollToFixed({
            limit: $('#footer').offset().top - $('#info').outerHeight(true) - 10,
        });
         } else {
             $('#info').unbind('scrollToFixed');

         }
    })
    .resize();//trigger resize on page load
});

it's does not work in IE7, is there a way you can tweak it ?

thanks, great plugin !

I do not know if the title says something but here is a short screencast that I have made:

http://www.screencast.com/t/0HumRE55RkjZ

maybe it helps to understand.

My fixed container is a slide out container and if the container is fully extended, the remaining page content continues to scroll behind it. However, if the container is open and if I scroll down the page, then close the fixed slide out container and scroll up the page, a huge whitespace appears, which obviously is related to the height of the slide out container, which is now closed. If I continue to scroll up the page, the huge gap disappears with 1 jump. That doesn´t look good at all.

Is there anything I can do about it. There should be another calculation triggered if I close that fixed slide out container. So if I scroll up after closing it, the hight is not relevant anymore.

Any help??????

Not working in Opera 11.6. Looks like the problem in calculating of coordinates when scrolling.

I've noticed minor offsets are wrongly calculated when * { box-sizing:border-box } is used. The most obvious one being when the element is unfixed. this element was incorrectly offset-right by the padding value of that side.

Paul Irish wrote a piece on why setting this CSS property is a good idea.

Hi,

I've noticed two issues with the 'remove' trigger that I think should be resolved:

• Triggering a remove and then calling $.isScrollToFixed() on the same element returns true, where it should be false.
  I've fixed this problem (Locally) by removing the ScrollToFixed data from the element when 'remove' is triggered:

 target.bind('remove.ScrollToFixed', function() {
 // ...
 base.$el.removeData("ScrollToFixed");
 });

• This is less of an issue but I think it's not handled correctly- When triggering a remove for an element, it calls setUnfixed() without triggering any preUnfixed/unfixed events. I think it should... What do you think?

Thanks,
Saar

I'm using this script with a button to hide the element. Problem is that when the hide button is clicked, the element will be hidden but my body isn't resized and there's an huge empty spot at the top of the page.

You can see it in action here: http://www.ni-dieu-ni-maitre.com

[quote]

It appears that the footer work is causing an issue with the carts. Please use this version of the min.js until this issue is resolved:

https://raw.github.com/bigspotteddog/ScrollToFixed/a630bdb2876d823b39311ab14606a0254d5deecc/jquery-scrolltofixed-min.js

horizontal scrolling is presented because the installation height of the element does not consider the width of the vertical scroll bar, how to update the width?

http://jsfiddle.net/fe4Xd/1/

Hi!

I've implemented your amazing script into a wordpress theme based on roots (bootstrap).
http://arb.nu/aufdeutsch/hipster-spotting-downtown/

As you scroll down, the related articles follows, but as you notice, it loses it's padding when it gets position: fixed;
I'm not quite sure how to solve this, do you have any ideas?

Cheers

Here's my test blog http://fanzilla.org/wordpresstest3/
You can see when you scroll just reaching the first widget on the sidebar the content that i want to scroll with the page already floated up to the top. I tired like everything but it just does this when there's any sort of divs or css class on top of the widgets i'm trying to float.

Hello,

I think this is a fantastic feature :-) but I am having an issue with it just simply disappearing rather than scrolling up when it hits the limit point?

Also, I am wanting it to start scrolling when the bottom of the fixed div hits the limit point, where as at the moment it activates when the top of the div hits the limit point?
Could you possibly help me with this?

Here is a link to a page where I am using it:

http://www.vision-guitars.co.uk/Yamaha-Pacifica-120H-Electric-Guitar-Black

Thank you
Helen

Hi, firstly I'd like to say that the plugin is great and thank you ver much for sharing.

However I am having a slight problem with it, I have seem to be having an extra div being generated when jthe function assigns the 'fixed' position attribute.

You can takek a look at the problem here: http://faiththeagency.com/easyphone/frequently-asked-questions.php

Not sure if anyone else has had this problem at all?

Could someone please help?

Actually, the scroll event is listened only on window and position is calculated also from document's top 0 and left 0.

It would be nice to be able to set it to something else.

For instance:

<div class="sidebar">
  <h2 class="fixme">Some Title</h2>
</div>

$('.sidebar .fixme').scrollToFixed({'container': $('.sidebar')})

IOS5 is supposed to support fixed positioning. Enabled this for iOS5 and test it out.

Removing the plugin from an element, then reapplying the plugin produces inconsistent results. The reapplied element will not react properly until the window is first scrolled.

Also, an element that has its limit invoked, will not re-invoke its limit when the window is refreshed.

Hi,

First of all, thank you for this simple but useful plugin :)

I think i busted out an issue :

I implemented the scrollToFixed plugin to an element with a float:left style attribute on his <div> parent (it's a 2-columns layout page).

Everything was working as expected until i tried it in IE8 but also when i tried to resize the window in all major browsers (FF, Chrome...) : the spacer display style attribute is changed from "block" to "none", then the 2nd column moved under the first column.

To be more clear, i made this fiddle which reproduce the issue : http://jsfiddle.net/LHLFq/3/

Steps to follow :

• 1. Scroll until the cart hit the limit
• 2. Try to resize the window

I found a dirty fix which seems to work, i have duplicated this code from setFixed() at the end of setAbsolute().

            spacer.css({
                'display' : target.css('display'),
                'width' : target.outerWidth(true),
                'height' : target.outerHeight(true),
                'float' : target.css('float')
            });

Thanks for your help, and sorry for any mistakes in my English ;)

Looks like there is an issue with the optional limit setting when there is a horizontal scrollbar, the scrollbar is scrolled right, and the element moves from fixed to absolute (when the limit kicks in). Probably need to set the offset left when the element goes absolute. Not an issue without limit or without a horizontal scrollbar.

Plugin is working fine in my circumstances, except the following bug:

When I scroll down far enough so the fixed sidebar (which the plugin is controlling) stops scrolling (in my case it's the footer I don't want it to overlap with), THEN resize the browser window in height and then try to scroll up, the sidebar will stay at it's position and won't scroll up again.

When i tired to insert scripts such as Adsense Codes or any script to scroll with the sidebar it just stops working. What can i do to scroll scripts?

Hi there,

Appreciate your work. I've been trying to integrate your plugin in Blogger. It's working like a charm in Firefox, Chrome, Opera and Safari, but not in IE9. Here's a test page I've been working on:

http://yoboy-12.blogspot.com/

I've observed different outcomes in IE9:

1. When the page loads, the scrolltofixed element (the menu) dissapears
2. The menu is visible, but other elements in the page appear on top of it.
3. The menu is visible in maximised window, but it goes to top left when the window is made small of.

BTW, I tried your demo page on IE9 (http://jsfiddle.net/y3qV5/), and I couldnt see the floating box at all. I'm not sure on IE8.

Hope to hear from you soon. IE has always been a pain in the butt for me.

It would be very usefull detail what every option does. I find examples not fully descriptive.

Hi,

It is again the similar html template to test. It works good, when we just reload it by ctrl-F5 (hard-reload in FF).

Soft reloading - is a common F5 reloading in FF. In contrast to hard reloading, soft reloading will preserve scroll offset if the page was somehow scrolled before reloading.

If I scroll the page fx to the middle of its length and then press F5 in FF, then on next load marker elements get wrong offset marks to become absolute/fixed.

We have tested it in

Firefox, Chromium on Windows XP and Mac OS X Lion.

The only browser where it works ok - is Chromium on Mac. The rest of the results, the wrong ones, are not similar to each other.

Steps to reproduce:

1. Load the page, ensure it works ok, when it is loaded from the 0% scroll state;
2. Scroll page to fx 50% of length. Do a soft reload preserving scroll position on reloaded page.
3. Make some scrolling up/down and see that markers absolute/fixed numbers are wrong.

<!DOCTYPE html>
<html>
<head>

  <meta charset='utf-8'>
  <title> *** TEST ***</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://bigspotteddog.github.com/ScrollToFixed/jquery-scrolltofixed-min.js" type="text/javascript"></script>

 <style type="text/css">
 body { margin-top:10px; }
  .wrapper {
    width: 500px;
    margin: 0 auto;
  }
  .marker {
    margin: 0 auto;
    width: 200px;
    height: 98px;
    border: 1px solid #fff;
    text-align: center;
    font-size: 20px;
  }
  .section {
    margin: 0;
    text-align: center;
    font-size: 40px;
    height: 800px; 
    }
  .v1 { background-color: #0000FF; }
  .v2 { background-color: #6600FF; }
  .v3 { background-color: #6600CC; }
  .v4 { background-color: #660099; }
  .v5 { background-color: #660066; }
  .v6 { background-color: #ff6600; }

  </style>

  <script>

  $(function() {
    var collection = $('.marker');
    $.each(collection, function(index, value) {
      if (index == collection.length - 1) {
        $(value).scrollToFixed({
          //marginTop: 16,
        });
        } else {
        var nextIndex = index + 1;

        $(value).scrollToFixed({
          //marginTop: 16,
          limit: $(collection[nextIndex]).offset().top - 110,
        });
        //alert($(collection[nextIndex]).offset().top);
      }
    });
  });

  </script>

</head>
<body>
  <div class="wrapper">

    <div class="marker v1">marker 1</div>
    <div class="section v1">section 1</div>

    <div class="marker v2">marker 2</div>
    <div class="section v2">section 2</div>

    <div class="marker v3">marker 3</div>
    <div class="section v3">section 3</div>

    <div class="marker v4">marker 4</div>
    <div class="section v4">section 4</div>

    <div class="marker v5">marker 5</div>
    <div class="section v5">section 5</div>  

    <div class="marker v6">marker 6</div>
    <div class="section v6">section 6</div>  

  </div>
</body>
</html>

how to position the right element? now he always position the left

The test page included in the package is not working for me on an iPad2 and and iPad3, both running iOS6. It does work for me on iPads 2 & 3 running iOS5.

Hi -

I'm trying to use the similar footer effect as in your example test.html, where li.footer sits above li.footer-content. Trouble is, if there's not much content, li.footer is positioned at the bottom of the window, and li.footer-content is above it. It's only when you scroll or resize the window that li.footer jumps to its correct location, above li.footer-content.

(I can recreate this in test.html by removing all the content in li.content).

How can I position it correctly on pages with little content?

Cheers,

Ben

Its a little hard to give this problem a proper title, so I'll explain better here:

I have a page with a fixed element that sticks to the bottom of the screen on load, then when I scroll to a certain point the element falls into place and scrolls with the rest of the page.

I also have some jquery in the page that expands or minimises a couple of other elements within the page upon certain events. This changes the $.offset().top value that is used in the code below.

$('.package-total').scrollToFixed({
bottom: 0,
limit: $('.wizard-bottom').offset().top
});

The problem is that when this offset changes, the element I'm trying to scroll tries to stick in the original position it would upon first load.
If the page height remains the same its all fine, but If the page height is changed after the initial load, then its messes up.

I tested this also with one of the example fiddles you have: http://jsfiddle.net/ZczEt/167/
In chrome, I manually edited the height of the header, and then the summary box no longer stopped at the top of the footer when scrolling, there was a margin equal to that of the height I took off the header.

Does this make sense? It's a little hard to explain.

Oscar suggested adding pre and post position hooks so event code could be fired to add/remove classes from elements. I was thinking about doing this before, so this was a good reason to add it now.

For each element added to scrollToFixed, events will fire for the element before its position changes:

• preFixed - fired before the element goes fixed
• preUnfixed - fired before the element goes unfixed
• preAbsolute - fired before the element goes absolute

When an element changes position, the position it left will fire these events:

• postFixed - fired before the element leaves fixed
• postUnfixed - fired before the element leaves unfixed
• postAbsolute - fired before the element leaves absolute

Here is a sample:

$('.footer').scrollToFixed( {
    bottom: 0,
    limit: $('.footer').offset().top,
    preFixed: function(el) { $('.footer h1').css('color', 'blue'); },
    preAbsolute: function(el) { $('.footer h1').css('color', 'red'); },
    postFixed: function(el) { $('.footer h1').css('color', ''); },
    postAbsolute: function(el) { $('.footer h1').css('color', ''); },
});

Great plugin. I'm new to jQuery so this may be a simple question. Is it possible to modify a different div when the targeted div position becomes fixed?

For example, say I wanted to change the body bg color when the target div becomes fixed. Is that possible?

Thanks.

I have a sample wire-frame working that seems to work fine in everything except IE8. IE8 drops the fixed element down the page, but does not stay fixed.

http://www.wheretostay.com/test/test-scroll.php

I am not using an UL like in your examples, I am using DIVs.

Thanks for any help.

Thom

Hi, first of all thanks for your plugin its really good!

I'm having an issue with the plugin, the element is rendered when the page loads and after I bind the plugin, the element dissapears(after checking the code in the browser I see the div is deleted and replacing it with an empty div), this only happens in Chrome running on a Macbook Air, however it works correctly in all other OS's and browsers.

This is the code I'm using to bind the element to the plugin:

$('#sidebar').scrollToFixed({
limit: $("#footer").offset().top -70,
marginTop:
$('h1').outerHeight() -20
});

Hello,

first of all thanks for this great plugin!!!!!!

But now I've come to a point where I don't know how to solve this issue.
I've created a fiddle: http://jsfiddle.net/zTJF7/6/

The black box at the bottom should be fixed all the time until the page scrolls to the end of div#middle.

But when I use Tabs or accordions the fixed element ("blackbox") with different heights Scrolltofixed doesn't recalculate the position or changes fixed to absolute or vice versa.

Use situations to trigger this problem:

1. Open Tab1
2. Scroll down till the tab-menue is at the very top of your viewpoint
3. change to Tab12

The blackbox jumps up.

I tried already man possibilites to smooth these actions. Tried to animate these changes and ended up with 100 lines of conditions, tried to calculate the height of the next tab. I was working on that problem for more than 30 hours with no solution.

Has anybody an idea to solve this issue?

Thanks for your help.

Cheers,

haurg

Hi there,

Looking for some advice regards this:
http://alistairtweedie.com/dev/auchincruive/

The previous image isn't isn't being pushed up by the next image

Any advice would be great

Thanks again and keep up the good work

There would be great if the plugin could be applied to footers and fixes the element to the botton of the window.

I have a problem with the ScrollToFixed plugin. When I enable it on a page with internal anchors these do not seem to function properly. For example, the link <a href="#anchor"></a> does not go to <a name="anchor"></a> when the plugin is enabled but brings me to the bottom of the page instead.

Hello,
I have an issue where an existing website (Can't change it directly) is using ScrollToFixed to move an element on the page. I am creating a script that will, among other things, stop or prevent that element from moving.
Initialization code:
$j('#large_sidebar').scrollToFixed({
marginTop: 18,
preFixed: function() { $j(this).addClass('fixed'); },
postFixed: function() { $j(this).removeClass('fixed'); }
});

...

I tried with
$j('#large_sidebar').scrollToFixed({});
and..
$j('#large_sidebar').scrollToFixed();
but it doesn't have any effect.

Is it possible to remove the .scrollToFixed() once it is already added with another command since I can't edit the source?

My sidebar has expandable and collapsible elements. Your script works perfectly except when an element is expanded—it overlaps the footer rather than pushing it down. This is probably more my fault than yours, but I've finally concluded that I have no idea what I'm doing, haha.

I tried using $('aside').scrollToFixed({ limit: $($('footer')).offset().top }); but with no luck.

I appreciate any help you're willing to provide.

Thank you for your time and the wonderful script. :)

We use your plugin for a menu with dynamic length (various accordions containing stuff like open elements, bookmarks, context actionss etc). It all works just fine, unless the menu becomes too long. Then, because of the fixed position, some elements in the open accordions become unreachable.
This is very similar to issue #22 where you introduced the option minWidth, so I made a little modification to checkScroll() (actually just the if-condition at l. 203):

 if (base.options.heightOffset && ($(window).height() < (base.options.heightOffset + target.height()))) {
     if (!isUnfixed() || !wasReset) {
          postPosition();
          target.trigger('preUnfixed');
          setUnfixed();
          target.trigger("unfixed");
        }
  }

so that the target's height is taken into account. heightOffset is a variable I introduced for better behavior (since the menu is below a header and just taking the target's height wouldn't be sufficient).

I thought you might want to integrate that.