Help on CSS on page scrolling


#1

My site https://www.ans.tips . I need the left and right columns to stay still, while the centre column scrolls. This is becuase I rarely get any clicks onthe Ads on left & right. Also how to refresh the left & right coumns contents after a few minutes… so I get new Ads there. Thanks for your help.
Attaching the current CSS.

@charset "UTF-8";

html {
    /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-family: 'Exo 2', sans-serif;
}

.navbar-brand {
    font-size: 24px;
    color: #FFFFFF !important;
    font-weight: bold;
}

.nav-logo-main {
    height: 20px;
}

[contentEditable = true]:empty:not(:focus):before {
    content:attr(placeholder)
}

.content-editable {
	display: block;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	/*width: 80px;*/
	min-height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.fa-ul {
	margin-left: 0;
}

.fa-ul>li {
	padding-bottom: 10px;
	font-size: 1.1em;
}

pre code {
	color: #FFFFFF;
}

/*.fa-ul > li.active {
	background: #EEEEEE;
	padding: 0px 5px 10px 5px;
}*/

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h4.qlist-title a {
	color: #555555;
}

h1.qdetail-title {

}

.right-sort-links {
	margin-top: 20px;
	margin-bottom: 15px;
	font-weight: bold;
}

.q-answer-header {
	margin-bottom: 12px;
}
.q-answer-footer {
	margin-top: 12px;
	margin-bottom: 20px;
}

.q-answer-header .img-circle {
	width: 40px;
	height: 40px;
}

#t-icon-upload, #u-avatar-upload {
	display: none;
}

a#topic-icon-trigger img, a#avatar-icon-trigger img {
  display: block;
}

a#topic-icon-trigger span, a#avatar-icon-trigger span {
	display: none;
    position: absolute;
    top: 0;
    left: 15px;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #ddd;
    width: 128px;
    height: 128px;
    text-align: center;
    padding-top: 50%;
}

a#topic-icon-trigger:hover span, a#avatar-icon-trigger:hover span {
  display: block;
}

#t-icon-img .thumbnail, #u-avatar-img .thumbnail {
	width: 128px;
	height: 128px;
}

.widget {
	margin-bottom: 0 !important;
}

hr {
	margin-top: 5px;
}

hr.nomargin-bottom {
	margin-bottom: 0px;
}

.user-follow-widget-text {
	height: 78px;
}

.user-content-list {
	font-size: 14px;
}

.header-with-small {
	position: relative;
}

.header-small {
	font-size: 12px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.center {
	text-align:center;
}

#msg-txt {
	margin-top:10px;
	min-height: 65px;
	height: auto;
}

.msg-reply-input {
	min-height: 65px;
	height: auto;
}

#msg-reply-btn {
	margin-top:10px;
}


.msg-thread-items {
	position: relative;
	height: 100%;
	min-height: 420px;
	padding-bottom: 132px;
}

.msg-thread {
	/*min-height: 220px;*/
	overflow-y: scroll;
	overflow-x: hidden;
}

#compose-msg-reply {
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 1px solid #e2e2e2;
    background: #f6f6f6;
    /*position:absolute;*/
    width: 100%;
    bottom:0;
}

.msg-list-container {
	/*background: #F6F6F6;*/
}

.msg-list-item {
	/*background: #F6F6F6;*/
}

/*.msg-active {
	background: #FFFFFF !important;
}*/

.no-msg-txt-wrapper {
	/*margin-top: 50px;*/
	color: #999;
}

.msg-list-item {
	padding: 5px 0;
}

.msg-list-item, .msg-list-item .widget {
	background: #ffffff;
}

.msg-active, .msg-active > .widget {
	background: #f6f6f6;
}

.msg-list-item .widget-content {
	position: relative;
	margin: 0;
	font-size: 14px;
}

.msg-list-item .msg-date {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 12px;
	color: #777777;
	font-weight: normal;
}

.msg-list-item .widget-simple {
	padding: 5px;
}

.msg-list-item .widget-simple .widget-content small {
	color: #3b3f40;
}

.msg-list-item  .widget-image {
	width: 40px;
	height: 40px;
}

.msg-list-item {
	border-bottom: 1px solid #e2e2e2;
}

.msg-thread img.img-circle {
	width: 50px;
	height: 50px;
}

#user-bios-wrapper .widget-simple .widget-content {
	margin: 0 0 12px 0;
}

#q-comments-list p {
	margin-bottom: 10px;
}
.q-comment-item {
	margin: 5px 0;
}

#a2a-experts-list .img-circle {
	width: 40px;
	height: 40px;
}

.notif-mark-all-read {
	height: 50px;
	padding: 12px 5px;
}

.notif-mark-all-read #menu-clear-notificatons {
	display: block !important;
	color: #FFFFFF !important;
}

.notif-mark-all-read #menu-clear-notificatons:hover {
	color: #6ae2eb !important;
}

.no-new-notifications {
	padding-top: 15px;
    text-align: center;
}

.notification-dropdown
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: "\e151";
}

a.desc:after {
    content: "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}


/* OLD CSS BELOW */



.q-topic-link {
	padding: 5px 10px;
	border-radius: 15px;
}

#q-detail-pg-container {
	/*padding-top: 20px;*/
}

.link-action-item {
	margin-right: 12px;
}

a.q-more-icon-link {
	padding: 0 5px 5px;
	font-size: 1.2em;
}

a.q-more-icon-link:hover {
	background: #CCCCCC;
	border-radius: 3px;
}

/*html,
body {
    height: 100%;
    background-color: #FFFFFF;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}*/

.wrap {
	height: 100%;
	min-height: 600px;
}

.jumbotron {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.jumbotron h1 {
    font-size: 48px;
}

#login-container {
	position: relative;
	top: 0;
	left: 0;
	margin: 0 auto;
	margin-bottom: 20px;
	/* border: 1px solid #E5E5E5; */
}

#reset-pwd input, #login-form input, #user-form input, #user-form select, #user-form textarea {
	border: 1px solid #e5e5e5 !important;
    border-radius: 3px;
    background: #eee;
}

#user-form {
	padding: 5px 0;
}

.social-auth .btn {
	margin: 5px auto;
}

.btn-facebook {
	background-color: #8b9dc3;
    border-color: #8b9dc3;
    color: #ffffff;
}

.btn-twitter {
	background-color: #0084b4;
    border-color: #0084b4;
    color: #ffffff;
}

.btn-google {
	background-color: #D34836;
    border-color: #8b9dc3;
    color: #ffffff;
}

a.btn-facebook:hover, a.btn-twitter:hover, a..btn-google:hover {
	color: #ffffff;
}

.push-bit {
    padding-bottom: 10px;
}


#login-container .login-title {
	padding: 10px 10px;
}

#profile-form .form-group, #user-form .form-group, #login-form .form-group, #twitter-signup .form-group {
	margin-bottom: 0;
}

.profile-update-btn-wrap {
	margin: 15px 0;
}

.field-loginform-rememberme {
	margin-right: 0 !important;
}

.g-search-inputs .btn-group.open .dropdown-toggle {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.answer-view-author, .answer-view-author-more {
	/*padding-top: 30px;*/
}

.answer-view-author .btn {
	margin-top: 15px;
}

.answer-view-author-more {
	padding-bottom: 30px;
}

.answer-view-author-more-link {
	padding: 10px;
}

.a-user-answer-item {
	padding-bottom: 15px;
}

.a-user-answer-item a {
	color: #3B3F40;
	font-size: 14px;
}

.remove-profile-topic-wrap {
    position: absolute;
    right: 20px;
    top: 35%;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.footer-links { padding-left: 0; margin-bottom: 20px; }
.footer-links li { display: inline-block; }
.footer-links li+li { margin-left: 15px; }

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

#spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
	height: 64px;
	width: 64px;
	z-index: 9999999;
}



.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: -10px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* this is to ensure tag autocomplete dropdown is visible in bootstrap modal */
.ui-autocomplete {
    z-index: 5000;
}

.ui-widget {
	/*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-family: 'Exo 2', sans-serif;
}

/* file input button */
.upload-input {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.upload-input input.file-input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.small {
	font-size: 11px;
}

.alert-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.success {
	color: #5cb85c;
}

.q-links {
	margin-bottom: 20px;
}

.list-stack-item {
	padding-bottom: 5px;
}

.q-followers-list {
	height: auto;
}

.q-followers-list .thumbnail {
	border: none;
	border-radius: 50%;
}

.q-followers-info {
	clear: both;
}

i.gi {
	margin-right: 3px;
}

.q-stats-hits {
	margin: 5px 0;
}

.q-last-aksed {
	margin: 5px 0;
}

.q-follower-img {
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 17px;
    margin-bottom: 15px;
}

.circle {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.user-profile-topic-item {

}

.ui-autocomplete li.ui-menu-item {
	height: 50px;
	width: 100%;
}

.ui-autocomplete li.ui-menu-item:hover {
	background: #F5F5F5;
    border-top: 1px solid #e2e2e2 !important;
    border-bottom: 1px solid #e2e2e2 !important;
}

#q-comment-input, .a-comment-input {
	width: 100% !important;
}

.comment-reply-input {
	width: 80px;
	margin-bottom: 10px;
}


@media (min-width: 768px)
.navbar-right {
	margin-right: 0 !important;
}


#g-search-bar {
	width: auto;
	min-width: 40%;
}

.g-search-form {
	width: 100%;
}

#g-search-ac {
	width: 100% !important;
}

#g-search-type-selection { text-decoration: none;}

#report-explanation-txt, #answer-report-explanation-txt {
	min-height: 34px;
	height: auto;
}
.radio {
	padding: 5px 0;
}

.oembed-url-link {
	display: none !important;
}

ul.notification-dropdown > li {
	width: 350px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding-bottom: 15px !important;
	position: relative;
}

ul.notification-dropdown > li > a {
	display: inline !important;
	color: #337ab7 !important;
	padding: 3px 0 !important;
	white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

ul.notification-dropdown > li > a:hover {
	text-decoration: none !important;
	background: none !important;
}

ul.notification-dropdown > li > a.clear-notification {
	position: absolute;
	right: 20px;
	top: 0;
	font-size: 1.5em;
}

ul.notification-dropdown > li.notification-footer {
	padding: 5px 15px;
}

ul.notification-dropdown > li.notification-footer > a {
	display: block !important;
	color: #CCC !important;
}

.notification-badge {
	background: #FFFFFF;
	color: #333333;
}

a.ask-btn-gbl {
	height: 35px !important;
    color: #fff !important;
    line-height: 3px !important;
    margin-top: 8px !important;
    margin-left: 5px;
}

a:hover.ask-btn-gbl {
	color: #4cae4c !important;
	background: #fff !important;
}

a:active.ask-btn-gbl {
	color: #4cae4c !important;
	background: #5cb85c !important;
}

/* hide pagination links for infinite scroll */
ul.pagination {display: none !important;}
/* don't hide pagination in gridviews */
.grid-view ul.pagination {display: inline-block !important;}

.notification-head-separator {
	margin: 0;
}

.mark-read-all {
	font-size: 15px;
}

.notification-list-item {
	padding: 15px 5px;
	border-bottom: 1px solid #eaeaea;
}

.notifications-list .unread {
	background: #FFFFFF;
}

.unread {
	background: #EEE;
}

.suggested-questions {
	display: none;
}

.answer-date {
	color: #aaa;
	font-size: 12px;
}

.about-link a {
	margin-top: 20px;
	margin-bottom: 10px;
}


.verified {
    background-position: center;
    line-height: 28px;
    background-color: #34bae2;
    border-radius: 50%;
    border: 2px solid #fff;
    display: inline-block;
    background-size: 18px;
    background-repeat: no-repeat;
    background-image: url('../img/verified.png');
    width: 28px;
    height: 28px;
    border-width: 3px;
    position: absolute;
    top: 105px;
    left: 120px;
}

.verified-sm {
    background-position: center;
    line-height: 28px;
    background-color: #34bae2;
    border-radius: 50%;
    border: 2px solid #fff;
    display: inline-block;
    background-size: 12px;
    background-repeat: no-repeat;
    background-image: url('../img/verified-sm.png');
    width: 22px;
    height: 22px;
    border-width: 3px;
    position: absolute;
    /*top: 24px;
    left: 40px;*/
    top: 36px;
    left: 24px;
}

.pick-topic-wrapper {
	font-size: 28px;
	line-height: 50px;
	margin-right: 10px;
}

div.ut-search-results > div.widget-simple > h4 {
    color: #333;
}

div.ut-search-results > div.widget-simple > h4 > small {
    color: #777;
}

div.q-answer-header .widget-simple {
    padding: 15px 15px 0 0;
    position: relative;
}

div.u-follow-header .widget-simple {
    padding: 15px 15px 0 0;
    position: relative;
}

div.u-follow-header .img-circle {
    width: 40px;
    height: 40px;
}

div.a2a-list-header .widget-simple {
    padding: 15px 15px 0 0;
    position: relative;
}

div.a2a-list-header .img-circle {
    width: 40px;
    height: 40px;
}

.topic-sm-img {
    width: 20px;
    height: 20px;
    margin-bottom: 5px;
}

.zero-mt {
    margin-top: 0 !important;
}
.zero-mb {
    margin-bottom: 0 !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}


#2

What you described is covered by the styling position: fixed

That would be the domain of Javascript normally.

I must however caution you that Google Adsense specifically bans automatically refreshing ads in their terms of service, and I cannot therefore help you in doing so.


#3

Can flexbox maybe be an option?

css:

.content-wrap {
  display: flex;
  justify-content: space-between;
}

.sidebar-left,
.sidebar-right{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

html:

<div class="row content-wrap">

	<div class="col-md-3 sidebar-left">
	
	</div>
	
	<div class="col-md-6 animation-pullDown">
	
	</div>
	
	<div class="col-md-3 sidebar-right">
	
	</div>	
	
</div>

#4

I tried pasting that to my CSS, but did not work. Can you kindly edit the new code in the original CSS file, so that I don’t make a mistake .

Also where do I paste the html code ?

Thanks for helping out a newbie


#5

You can not simply paste that! In your html you have a row holding these three columns. In your source line 62. So you need to adjust the classes for the row and the columns. And add the classes to your css file


#6

You could just try this:

.questions-wrapper .row >  .col-md-3 {
    position:-webkit-sticky;
    position:sticky;
    top:0;
}

Flexbox and sticky don’t work well together because columns are equal height and there is nothing to sticky. You would need align-self:flex-start on the sticky column.

Large sticky or fixed positioned elements often cause more trouble than they are worth.


#7

@PaulOB. Again something learned. :slight_smile: Never to old. Thx Paul


#8

Thanks this code worked perfect. [quote=“PaulOB, post:6, topic:317752, full:true”]

You could just try this:

.questions-wrapper .row >  .col-md-3 {
    position:-webkit-sticky;
    position:sticky;
    top:0;
}