Welcome to TalkGraphics.com
Results 1 to 8 of 8
  1. #1

    Default Sticky element runs into footer

    I am using a typical navigation bar at the top of a website that scrolls with the page. On the left of the page I have a list of 8 items that, when clicked, bring up a pop up layer. I have set those 8 items to Sticky so they stay in place. My footer is a full width picture with links and info on it ... not unusually tall. Problem is, when you scroll to the bottom of the page my footer runs under the sticky items and looks messy. My client is set on the footer so there's no chance I can decrease the size of it at all. Is there any way to solve this?

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,462

    Default Re: Sticky element runs into footer

    got a link to the url Allie?
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

  3. #3

    Default Re: Sticky element runs into footer

    I have a temporary folder that the site is loaded to while it's under construction. Here is a link to the projects page. It's the only page with sticky elements on the left so it's the only page that I'll have issues with.
    http://www.casteendesign.com/kenexpert1/projects.htm

    Thank you for your help!

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,462

    Default Re: Sticky element runs into footer

    Hi Allie, thanks for the link. I can only see this as a problem if the visitors browser is set at a smaller height. I think that obviously if you're going to make parts of the page sticky, then the browser height needs to be considered as if it's not high enough the window runs out of real estate (something you can't control), and the sticky objects will overlay the footer. I can't think of a way around this other than making the side menu horizontal rather than vertical (It would also help if the vertical line ended at the bottom of the menu rather than being longer)
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,462

    Default Re: Sticky element runs into footer

    Some further thought. See attached. It will work fine on browsers 700px high & above. It will obviously still cause overlaps on browser heights below this.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	alliefan.jpg 
Views:	26 
Size:	81.9 KB 
ID:	119251  
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

  6. #6

    Default Re: Sticky element runs into footer

    Ok I will try that. Thank you

  7. #7
    Join Date
    May 2016
    Location
    Uk & USA
    Posts
    14

    Default Re: Sticky element runs into footer

    Just trying to understand the problem.... Why is the sticky there (purpose)?
    You can have a sticky to left side of window without it overlapping the footer, so if it's only purpose is to be under menu/log then size the sticker from top down to base of menu / top of footer whichever is the shorter.
    Personally I'd make the logo & menu 'stick' to left side & top of window (never scroll out of view and as suggested above just shift the menu up as much as possible so it's bas only just meets the footer when page is fully scrolled up) also I'd allow the sub text of logo slip under the main Logo element if someone is narrowing the window, it give a 'responsive' effect.
    If I'm off base, on wrong track pls let me know,
    Cheers, Ron

  8. #8
    Join Date
    May 2016
    Location
    Uk & USA
    Posts
    14

    Default Re: Sticky element runs into footer

    Just as a clarification of what I meant earlier, here is an example based on your earlier link: https://www.project-edge.com/EConstruct/

    Cheers, Ron

 

 

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
  •