WordPress.org

Support

Sticky plugin

  • mafness

    @mafness

    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.

Viewing 15 replies - 1 through 15 (of 15 total)
  • WPyogi

    @wpyogi

    Forum Moderator

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

    mafness

    @mafness

    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.

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    mafness

    @mafness

    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

    WPyogi

    @wpyogi

    Forum Moderator

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

    Not sure what plugins you’re referring to?

    mafness

    @mafness

    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

    WPyogi

    @wpyogi

    Forum Moderator

    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?

    mafness

    @mafness

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

    WPyogi

    @wpyogi

    Forum Moderator

    Looks like essentially the same CSS:

    .rail{position:fixed;top:0}

    HTML:

    <div id="secondary" class="rail">

    mafness

    @mafness

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

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    mafness

    @mafness

    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

    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.

    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/

    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 …….

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Sticky plugin’ is closed to new replies.