SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question position:fixed; not behaving properly in all browsers, scrolling with page.

    I'm styling an element with position fixed and other css in a certain condition ( basically if the user scrolls up ), but the element is behaving like a relative positioned element. In other words, it is scrolling with the page and not remaining fixed.

    I tried isolating this issue, but this issue only exists in this site as a whole and I need it to work in this site.

    Code:
    var lastScrollTop = 0;
    $(window).scroll(function(){
        var st = $(this).scrollTop();
        if(st<=lastScrollTop){
            //scroll up
            if($(this).scrollTop()>235) $('#searchInput').removeClass('slideIn').addClass('stickySearch');
            else $('#searchInput').removeClass('stickySearch').addClass('slideIn');
        }
        else $('#searchInput').removeClass('stickySearch').removeClass('slideIn');
        lastScrollTop = st;
    });
    Right now the class .slideIn has no styling associated with it, but .stickySearch does. Here is the CSS:

    Code:
    .stickySearch{
        width:56% !important;
        position:fixed !important;
        left:0;
        right:0;
    }
    I checked in developer tools and the class is being applied and the styles are being applied, but the position fixed is just not working.

    Here is a live URL: http://goo.gl/ns6UEQ

    Note, it helps to have a small window in height so you can scroll. Scroll down so that the header is hidden up top and then scroll up and the search bar should appear, but the moment the header comes back into view the search bar will go back into place in the header.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's the transform on #container that is causing the problem.

    I documented the bug a while ago and a fixed element loses its fixed position if it is in the context of a parent that has a transform applied (or backface-visibility:hidden). I mentioned in the post that I thought the mechanics were different but they are basically the same bug.

    The only solution is to move the fixed element out of that context which will be awkward if you are making a sticky header as you want it to be in the flow to start with. You will either have to remove the transform from the container or instead create a duplicate fixed search element somewhere else in the page and just show that one instead when the page scrolls.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •