Scroll areas independend

Moderator

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

October 22, 2015 at 21:25 #83796

Participant

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.

October 23, 2015 at 16:39 #83870

Moderator

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

October 23, 2015 at 21:05 #83916

Participant

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

October 26, 2015 at 15:44 #84250

Moderator

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

October 26, 2015 at 18:30 #84322

Participant

This reply has been set as private.

October 26, 2015 at 19:02 #84326

Moderator

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

October 26, 2015 at 19:32 #84340

Participant

Sorry,
the code has no function…. 🙁

October 26, 2015 at 20:19 #84360

Moderator

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

October 26, 2015 at 20:54 #84363

Participant

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

October 27, 2015 at 16:42 #84465

Moderator

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

October 27, 2015 at 17:14 #84471

Participant

Yes, now I’ve insert it again.

October 27, 2015 at 17:56 #84487

Moderator

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

October 27, 2015 at 18:36 #84496