WordPress.org

Ready to get started?Download WordPress

Forums

Sticky plugin (16 posts)

  1. mafness
    Member
    Posted 10 months ago #

    I am hoping someone can help me.
    I am looking to create a DIV or Column that I can scroll, and then fix in one location while the rest of the page's contents will scroll . Similar to this
    http://www.monokroom.com/work/the-syrian-cry

    I have heard it called a few things "Sticky Column" "Fixed Div" etc
    What ever the hell it's called, I need this function.

    I would like to use it for in page content, AND NOT for blog posts, or widgets. A shortcode would be preferable. but anything that can point me in that direction would be useful.

  2. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    This is generally done using CSS so it's a theme question - what theme are you using?

  3. mafness
    Member
    Posted 10 months ago #

    Thanks for the response. ! I appreciate it.
    I was told that it was a jQuery element.

    The page I showed was more for formatting, but the idea is similar to the one found on bbdo.com (contact)

    It starts at one spot, stops, and then things scroll behind or around it. Sticky ish.

    But to answer you're question I am using Jarvis by RockNrolla Designs.

  4. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    There's probably more than one way to do it - but the site you linked to appears to be using CSS fixed positioning for the nav bar and the sidebar:

    #navbox {
        background-color: #000000;
        border-top: 1px dotted #000000;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        height: 90px;
        margin: 0 auto -90px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 500;
    }
    
    <div class="info" style="display: block; bottom: auto; position: fixed;">

    More info here:
    http://www.w3schools.com/css/css_positioning.asp

    For specific help with your theme, you'll need to ask the developer as commercial themes aren't supported here - partly because we don't have access so don't know how they are coded.

  5. mafness
    Member
    Posted 10 months ago #

    Is there a plugin that will do that ?
    I know they have those plugins for the Widget bars and blog posts, but I'm looking for one that I can add to an individual page.
    One that will scroll to a certain point then stop and fix itself

    Again, thank you for your help ! it is much appreciated

  6. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    I know they have those plugins for the Widget bars and blog posts

    Not sure what plugins you're referring to?

  7. mafness
    Member
    Posted 10 months ago #

    There are plugins available that when activated will achieve that result with the page widgets. Where everything on the side bar remains stationary after a certain amount of scrolling.

    I'm not looking to affect the widgets, I'm looking at maybe doing that with a column, or a div. Something short code driven

  8. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    I don't know of any - and CSS is an easy effective way to do it. Have you looked at the CSS resource I linked to?

  9. mafness
    Member
    Posted 10 months ago #

    I did, it's not quite what I'm after, its more like this
    http://store.apple.com/us/buy-iphone/iphone5s
    (Summery Panel)

  10. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    Looks like essentially the same CSS:

    .rail{position:fixed;top:0}

    HTML:

    <div id="secondary" class="rail">
  11. mafness
    Member
    Posted 10 months ago #

    so how would I apply that to a column inside a page using the wordpress editor.
    And again thanks for everything

  12. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    You'd need to find the CSS selector for the element you want to make fixed (sounds like your sidebar) - and then use that selector to add CSS to make that element fixed. It does take some knowledge of CSS - but the link I posted above is a good reference site for CSS. A browser tool like Firebug is also indispensable for CSS work.

    You could also try asking for more specific help with your site on a CSS forum like http://csscreator.com.

  13. mafness
    Member
    Posted 10 months ago #

    I tried that before. I got the Column to fix. but not in the right location. and if you resized the browser window the column would stay where it was while everything else would shift and nothing would align

  14. laptophobo
    Member
    Posted 7 months ago #

    Mafness,
    Were you able to find a solution to creating that pseudo-fixed column (like in your example: http://store.apple.com/us/buy-iphone/iphone5s)? The CSS idea offered by WPyogi, with the fixed position, keeps the div in place, where your example (and what I'd like to recreate) scrolls a bit and then stops at the edge of the screen.

  15. laptophobo
    Member
    Posted 7 months ago #

    After posting that reply, I came across this WPbeginner article that does the trick: http://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/

  16. mafness
    Member
    Posted 7 months ago #

    I havent been able to find a suitable option yet laptophobo
    I came across your example a while ago but it doesnt quite work.
    Still looking .......

Reply

You must log in to post.

About this Topic