Scroll areas independend

[nolls]

Hi,
exist an option to scroll different areas of a page (for example main area like Buddypress-Stream or sidebars)
independend of each other?

[Radu]

Hi,

If i understand correctly please read this topic : https://archived.seventhqueen.com/forums/topic/smooth-anchor

Best Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[nolls]

Hi,
no that’s not what I mean.
On my site I’ve got one sidebar. If I scroll the site, the whole site scrolls down.
But I want scroll down the sidebar, so the other areas keep on their positions.
Then I want scroll down for example the buddypress stream, and the sidebar keep on the position.
Its like frames in the site.

[Radu]

Hi,

Try this css code.

COPY CODE

.sidebar.sidebar-main.col-sm-3.sidebar-right { overflow-y: scroll; height: 400px; }

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[nolls]

Great,
now I can scroll the sidebar,
but additional I want to scroll the activity stream. Only the stream, without scrolling the whole page.

[Radu]

Hi,

Please provide URL were your activity appears.

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[nolls]

This reply has been set as private.

[Radu]

Hi,

Use this css code

COPY CODE

///// Activity Stream

body.activity #buddypress { height: calc(80vh - 100px); overflow-y: scroll; }

body.activity .kleo-transform .one-by-one-animated .start-animation .el-appear, body.activity .kleo-transform .kleo-thumbs-animated.th-appear img.start-animation, .kleo-transform .start-animation.el-appear {
    -webkit-animation: none;
    -o-animation: none;
    animation: none;
    opacity: 1;
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    transform: none;
    opacity:1 !important;
}

body.activity .kleo-transform .animated.animate-when-visible, .kleo-transform .animated.animate-when-almost-visible, .cul {
    opacity: 1;
}


/////For Members Directory
div#members-dir-list { height: calc(80vh - 100px); overflow-y: scroll; overflow-x: hidden;}


body.directory.members .kleo-transform .one-by-one-animated .start-animation .el-appear, body.directory.members .kleo-transform .kleo-thumbs-animated.th-appear img.start-animation, .kleo-transform .start-animation.el-appear {
    -webkit-animation: none;
    -o-animation: none;
    animation: none;
    opacity: 1;
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    transform: none;
    opacity:1 !important;
}

body.directory.members .kleo-transform .animated.animate-when-visible, .kleo-transform .animated.animate-when-almost-visible, .cul {
    opacity: 1;
}


////// Group Activity
div#groups-dir-list {  height: calc(80vh - 100px); overflow-y: scroll; overflow-x: hidden; }

body.directory.groups .kleo-transform .one-by-one-animated .start-animation .el-appear, body.directory.members .kleo-transform .kleo-thumbs-animated.th-appear img.start-animation, .kleo-transform .start-animation.el-appear {
    -webkit-animation: none;
    -o-animation: none;
    animation: none;
    opacity: 1;
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    transform: none;
    opacity:1 !important;
}

body.directory.groups .kleo-transform .animated.animate-when-visible, .kleo-transform .animated.animate-when-almost-visible, .cul {
    opacity: 1;
}

Best Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[nolls]

Sorry,
the code has no function…. 🙁

[Radu]

Try to put the code in kleo-child/style.css

Let me know if it works.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[nolls]

No, it doesn’t work. Can’t see any changes.

[Radu]

Hi,

The CSS code from above is loaded to the website now ?

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[nolls]

Yes, now I’ve insert it again.

[Radu]

Hi,

Sorry it was my mistake, the comments from file it altering the css code, this is a corrected one

COPY CODE

/* Activity Stream  */

#buddypress { height: calc(80vh - 100px) !important; overflow-y: scroll !important; }

body.activity .kleo-transform .one-by-one-animated .start-animation .el-appear, body.activity .kleo-transform .kleo-thumbs-animated.th-appear img.start-animation, .kleo-transform .start-animation.el-appear {
-webkit-animation: none;
-o-animation: none;
animation: none;
opacity: 1;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
transform: none;
opacity:1 !important;
}

body.activity .kleo-transform .animated.animate-when-visible, .kleo-transform .animated.animate-when-almost-visible, .cul {
opacity: 1;
}


/*For Members Directory */
div#members-dir-list { height: calc(80vh - 100px); overflow-y: scroll; overflow-x: hidden;}


body.directory.members .kleo-transform .one-by-one-animated .start-animation .el-appear, body.directory.members .kleo-transform .kleo-thumbs-animated.th-appear img.start-animation, .kleo-transform .start-animation.el-appear {
-webkit-animation: none;
-o-animation: none;
animation: none;
opacity: 1;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
transform: none;
opacity:1 !important;
}

body.directory.members .kleo-transform .animated.animate-when-visible, .kleo-transform .animated.animate-when-almost-visible, .cul {
opacity: 1;
}


/* Group Activity */
div#groups-dir-list { height: 500px; overflow-y: scroll; overflow-x: hidden; }

body.directory.groups .kleo-transform .one-by-one-animated .start-animation .el-appear, body.directory.members .kleo-transform .kleo-thumbs-animated.th-appear img.start-animation, .kleo-transform .start-animation.el-appear {
-webkit-animation: none;
-o-animation: none;
animation: none;
opacity: 1;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
transform: none;
opacity:1 !important;
}

body.directory.groups .kleo-transform .animated.animate-when-visible, .kleo-transform .animated.animate-when-almost-visible, .cul {
opacity: 1;
}

It should work

Let me know.

Best Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[nolls]

Marvelous, it works wonderful!!!
Great job!!

[Author]

Posts