Return to Answer

Updated screenshots to Stack's domain to avoid linkrot

Source Link

edited Jul 5, 2017 at 16:33

16.8k
3
46
75

html { margin: 0; }
body {
    width: 768px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    font-family: "Arial";
    margin-top: 16px;
}

h1 {
    font-size: 22px;
    margin-top: 0; /* I need this line because IE11 is not collapsing margins properly */
}

p {
    border-bottom: 1px solid #E0E0E0;
    margin: 0;
    text-align: right;
}

label {
    border: 1px solid #E0E0E0;
    border-bottom: 0;
    padding: 5px 5px 2px 5px;
    background: white;
    position: relative;
    z-index: 2;
    cursor: pointer;
    font-size: 0.9em;
}

input[type="checkbox"] {
    position: fixed;
    top: -20px;
}

.container {
    width: 768px;
    height: 509px;
    position: relative;
}
.container div {
    position: absolute;
    width: 768px;
    height: 509px;
}
.container .first {
    top:0px;
    left:0px;
    background-image: url("http"https://i.imgursstatic.comnet/LPT1xlAEElZs.jpg");
    transition: all 0.7s ease-out;
}
.container .second {
    opacity: 0;
    top: 0px;
    left: 800px;
    background-image: url("http"https://i.imgursstatic.comnet/da6RN737Xgu3.jpg");
    transition: all 0.7s ease-out;
}
.cover {
    position: absolute;
    top: 0;
    left: -100px;
    z-index: 1;
}
.cover.one {
    width: 67px;
    height: 27px;
}
.cover.two {
    width: 79px;
    height: 27px;
}
input[type="checkbox"]:not(:checked) + p label.primary {
    border-top: 2px solid orange;
}
input[type="checkbox"]:checked + p label.secondary {
    border-top: 2px solid orange;
}
input[type="checkbox"]:not(:checked) ~ .one {
    top: 34px;
    left: 615px;
    z-index: 5;
}
input[type="checkbox"]:checked ~ .two {
    top: 34px;
    left: 688px;
    z-index: 5;
}
input[type="checkbox"]:checked ~ .container .first {
    transform: translateX(-800px);
    opacity: 0;
}
input[type="checkbox"]:checked ~ .container .second {
    transform: translateX(-800px);
    opacity: 1;
}

<h1>Why doesn't position: sticky work in Chrome?</h1>
<input type="checkbox" id="question" />
<p>
    <label for="question" class="primary">Question</label>
    <label for="question" class="secondary">Discussion</label>
</p>
<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>
<div class="cover one"></div>
<div class="cover two"></div>

JSFiddle Example JSFiddle Example, for good measure.

html { margin: 0; }
body {
    width: 768px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    font-family: "Arial";
    margin-top: 16px;
}

h1 {
    font-size: 22px;
    margin-top: 0; /* I need this line because IE11 is not collapsing margins properly */
}

p {
    border-bottom: 1px solid #E0E0E0;
    margin: 0;
    text-align: right;
}

label {
    border: 1px solid #E0E0E0;
    border-bottom: 0;
    padding: 5px 5px 2px 5px;
    background: white;
    position: relative;
    z-index: 2;
    cursor: pointer;
    font-size: 0.9em;
}

input[type="checkbox"] {
    position: fixed;
    top: -20px;
}

.container {
    width: 768px;
    height: 509px;
    position: relative;
}
.container div {
    position: absolute;
    width: 768px;
    height: 509px;
}
.container .first {
    top:0px;
    left:0px;
    background-image: url("http://i.imgur.com/LPT1xlA.jpg");
    transition: all 0.7s ease-out;
}
.container .second {
    opacity: 0;
    top: 0px;
    left: 800px;
    background-image: url("http://i.imgur.com/da6RN73.jpg");
    transition: all 0.7s ease-out;
}
.cover {
    position: absolute;
    top: 0;
    left: -100px;
    z-index: 1;
}
.cover.one {
    width: 67px;
    height: 27px;
}
.cover.two {
    width: 79px;
    height: 27px;
}
input[type="checkbox"]:not(:checked) + p label.primary {
    border-top: 2px solid orange;
}
input[type="checkbox"]:checked + p label.secondary {
    border-top: 2px solid orange;
}
input[type="checkbox"]:not(:checked) ~ .one {
    top: 34px;
    left: 615px;
    z-index: 5;
}
input[type="checkbox"]:checked ~ .two {
    top: 34px;
    left: 688px;
    z-index: 5;
}
input[type="checkbox"]:checked ~ .container .first {
    transform: translateX(-800px);
    opacity: 0;
}
input[type="checkbox"]:checked ~ .container .second {
    transform: translateX(-800px);
    opacity: 1;
}

<h1>Why doesn't position: sticky work in Chrome?</h1>
<input type="checkbox" id="question" />
<p>
    <label for="question" class="primary">Question</label>
    <label for="question" class="secondary">Discussion</label>
</p>
<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>
<div class="cover one"></div>
<div class="cover two"></div>

JSFiddle Example, for good measure.

html { margin: 0; }
body {
    width: 768px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    font-family: "Arial";
    margin-top: 16px;
}

h1 {
    font-size: 22px;
    margin-top: 0; /* I need this line because IE11 is not collapsing margins properly */
}

p {
    border-bottom: 1px solid #E0E0E0;
    margin: 0;
    text-align: right;
}

label {
    border: 1px solid #E0E0E0;
    border-bottom: 0;
    padding: 5px 5px 2px 5px;
    background: white;
    position: relative;
    z-index: 2;
    cursor: pointer;
    font-size: 0.9em;
}

input[type="checkbox"] {
    position: fixed;
    top: -20px;
}

.container {
    width: 768px;
    height: 509px;
    position: relative;
}
.container div {
    position: absolute;
    width: 768px;
    height: 509px;
}
.container .first {
    top:0px;
    left:0px;
    background-image: url("https://i.sstatic.net/EElZs.jpg");
    transition: all 0.7s ease-out;
}
.container .second {
    opacity: 0;
    top: 0px;
    left: 800px;
    background-image: url("https://i.sstatic.net/7Xgu3.jpg");
    transition: all 0.7s ease-out;
}
.cover {
    position: absolute;
    top: 0;
    left: -100px;
    z-index: 1;
}
.cover.one {
    width: 67px;
    height: 27px;
}
.cover.two {
    width: 79px;
    height: 27px;
}
input[type="checkbox"]:not(:checked) + p label.primary {
    border-top: 2px solid orange;
}
input[type="checkbox"]:checked + p label.secondary {
    border-top: 2px solid orange;
}
input[type="checkbox"]:not(:checked) ~ .one {
    top: 34px;
    left: 615px;
    z-index: 5;
}
input[type="checkbox"]:checked ~ .two {
    top: 34px;
    left: 688px;
    z-index: 5;
}
input[type="checkbox"]:checked ~ .container .first {
    transform: translateX(-800px);
    opacity: 0;
}
input[type="checkbox"]:checked ~ .container .second {
    transform: translateX(-800px);
    opacity: 1;
}

<h1>Why doesn't position: sticky work in Chrome?</h1>
<input type="checkbox" id="question" />
<p>
    <label for="question" class="primary">Question</label>
    <label for="question" class="secondary">Discussion</label>
</p>
<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>
<div class="cover one"></div>
<div class="cover two"></div>

JSFiddle Example, for good measure.

Source Link

created Jun 11, 2015 at 2:10

TylerH

16.8k
3
46
75

I agree with most of what the top-voted several answers have said with regard to reviewing and self-moderation of comments, but I'd also like to suggest a UI change to help keep Stack Overflow clean, as outlined in basic form in this Stack Snippet I threw together this afternoon. More details follow below.

Note: You'll want to view the Stack Snippet in Full page mode.

html { margin: 0; }
body {
    width: 768px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    font-family: "Arial";
    margin-top: 16px;
}

h1 {
    font-size: 22px;
    margin-top: 0; /* I need this line because IE11 is not collapsing margins properly */
}

p {
    border-bottom: 1px solid #E0E0E0;
    margin: 0;
    text-align: right;
}

label {
    border: 1px solid #E0E0E0;
    border-bottom: 0;
    padding: 5px 5px 2px 5px;
    background: white;
    position: relative;
    z-index: 2;
    cursor: pointer;
    font-size: 0.9em;
}

input[type="checkbox"] {
    position: fixed;
    top: -20px;
}

.container {
    width: 768px;
    height: 509px;
    position: relative;
}
.container div {
    position: absolute;
    width: 768px;
    height: 509px;
}
.container .first {
    top:0px;
    left:0px;
    background-image: url("http://i.imgur.com/LPT1xlA.jpg");
    transition: all 0.7s ease-out;
}
.container .second {
    opacity: 0;
    top: 0px;
    left: 800px;
    background-image: url("http://i.imgur.com/da6RN73.jpg");
    transition: all 0.7s ease-out;
}
.cover {
    position: absolute;
    top: 0;
    left: -100px;
    z-index: 1;
}
.cover.one {
    width: 67px;
    height: 27px;
}
.cover.two {
    width: 79px;
    height: 27px;
}
input[type="checkbox"]:not(:checked) + p label.primary {
    border-top: 2px solid orange;
}
input[type="checkbox"]:checked + p label.secondary {
    border-top: 2px solid orange;
}
input[type="checkbox"]:not(:checked) ~ .one {
    top: 34px;
    left: 615px;
    z-index: 5;
}
input[type="checkbox"]:checked ~ .two {
    top: 34px;
    left: 688px;
    z-index: 5;
}
input[type="checkbox"]:checked ~ .container .first {
    transform: translateX(-800px);
    opacity: 0;
}
input[type="checkbox"]:checked ~ .container .second {
    transform: translateX(-800px);
    opacity: 1;
}

<h1>Why doesn't position: sticky work in Chrome?</h1>
<input type="checkbox" id="question" />
<p>
    <label for="question" class="primary">Question</label>
    <label for="question" class="secondary">Discussion</label>
</p>
<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>
<div class="cover one"></div>
<div class="cover two"></div>

The trend is clear: humans like to talk about things. As time has gone on, the Stack Exchange team has gone to great lengths to increase the number of users on Stack Overflow (and other SE sites), often at the expense of perceived site/network quality (it's harder to train a herd than one person, after all). In response to this, one common trend I've seen is periodic, severe cracking down, often out of frustration, to try and keep the site clean and to keep quality high. This has been pretty much a losing battle, and it will only get worse, so long as the network continues to grow in users and activity.

I know comments are ancillary to the main function of the network: asking good questions and receiving good answers. However, like the trend above, comments are only going to get worse/more plentiful (short of the Stack Exchange team simply disabling comments).

Instead of continuing this losing battle and ultimately giving in to pressure later on (which I think is the inevitable course), we should embrace this fact of human nature and shift all comments to Wikipedia-style "discussion" boxes (a "page behind the page") each question and each answer. That way, comments and their detritus are hidden from the clean, Google-able Q&A view that we all know and love/hate, yet they have a happy, permanent home in which to live, and people interested in commenting can continue to do so without mucking up the Ive-esque interface that Stack Exchange dreams of.

JSFiddle Example, for good measure.