Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 16
  1. #1

    Default Objects scrolling over sticky elements

    So I have a navigation bar that scrolls to the top and sticks. This works flawlessly. However, when you continue scrolling down the page, images, slideshows, etc. scroll over the top of the navigation bar. I've made sure that the nav elements are on the top of the layer. I even tried moving them to a layer above the Mouse Off layer.

    Am I missing something here? Thanks in advance for any help!

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,925

    Default Re: Objects scrolling over sticky elements

    I can't understand this Ed. Nav bars by default are alway on the top, even if you have a layer above the Mouse Over layer, the Nav Bar will still display above it on preview. Beyond this, if you've set the Nav Bar to stick to top it again defaults to always on top.

    Can you supply a web/xar file showing your problem?
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3

    Default Re: Objects scrolling over sticky elements

    Quote Originally Posted by Ed S. View Post
    So I have a navigation bar that scrolls to the top and sticks. This works flawlessly. However, when you continue scrolling down the page, images, slideshows, etc. scroll over the top of the navigation bar. I've made sure that the nav elements are on the top of the layer. I even tried moving them to a layer above the Mouse Off layer.

    Am I missing something here? Thanks in advance for any help!
    Thanks for the reply, Egg. See attached. You're correct -- objects don't scroll over the navbar itself. But they do scroll over the background made for the navbar.
    Attached Files Attached Files

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,858

    Default Re: Objects scrolling over sticky elements

    Quote Originally Posted by Ed S. View Post
    Thanks for the reply, Egg. See attached. You're correct -- objects don't scroll over the navbar itself. But they do scroll over the background made for the navbar.
    Just add a Sticky, Stretched white rectangle above the navbar.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  5. #5
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,512

    Default Re: Objects scrolling over sticky elements

    This seems like a bug but here is how you can work around it.

    Send the photo to the back.

    Select your gray rectangle that is set to stretch and turn off stretching.

    Clone that gray rectangle, set it to stretch, full width, and send it to the back.

    Also, the buttons for your nav bar are both on the mouse off layer. I fixed this. Have a look.
    Attached Files Attached Files

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,925

    Default Re: Objects scrolling over sticky elements

    Good workaround Gary.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,925

    Default Re: Objects scrolling over sticky elements

    I don't think it's a bug however. The Sticky/Stretchy window states Stretch Properties:

    'Stretchy objects appear behind the main page content, unless they are sticky.'

    So 'stick at top' keeps the object behind the main content, Sticky on the other hand brings it to the front.

    Thus you workaround overcomes this.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	sticky-stretchy.png 
Views:	104 
Size:	16.5 KB 
ID:	113617  
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #8
    Join Date
    Apr 2010
    Location
    Kildare, Ireland
    Posts
    906

    Default Re: Objects scrolling over sticky elements

    I just encountered this problem and would consider it a bug or at least something that should be improved.

    Garys workaround is good but if you apply a link the photo and give it a mouseover you will see how mouseovers appear over "Stick to top" objects (unlike "Sticky"). This doesn't look good on a site so I'm going to avoid using "Stick to top" in favour of "Sticky" because most web pages will have mouse over photos/buttons/objects on the page.

    Really I think "Stick to top" should behave like "Sticky" with standard mouseoff and mouseovers.
    XT-CMS - a self-hosted CMS for Xara Designers - Xara + CMS Demo with blog & ecommerce shopping cart system.

  9. #9
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,512

    Default Re: Objects scrolling over sticky elements

    I also observed if you have a horizontal nav bar and you increase the space between the buttons, even if you have the two rectangles described in my work around, the background shows between the gap between the buttons. I know there might a logical explanation for this but it is not behaving as a user, or at least this user, would expect.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	stick to top.jpg 
Views:	92 
Size:	68.5 KB 
ID:	113697  
    Last edited by gwpriester; 29 July 2016 at 12:48 PM.

  10. #10
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,925

    Default Re: Objects scrolling over sticky elements

    I also observed if you have a horizontal nav bar and you increase the space between the buttons, even if you have the two rectangles described in my work around, the background shows between the gap between the buttons. I know there might a logical explanation for this but it is not behaving as a user, or at least this user, would expect.
    Stick to top can be applied to more than one object, so to avoid the gaps, give the nav bar a background rectangle set to stick to top.

    I agree with xtom's comment though, the mouse-over state appearing above the stick to top objects is very off-putting. See the attached.
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

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
  •