title: How to show block below fixed container with jQuery?
body: <p>Please someone help me out on this I got stuck in my code. I'm putting my code complete below please have a look and please try to provide better solution.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lte IE 7]&gt;&lt;html id="ie" class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;&lt;html id="ie8" class="no-js lt-ie10 lt-ie9" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;![endif]--&gt;
  &lt;!--[if IE 9]&gt;&lt;html id="ie9" class="no-js lt-ie10" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;![endif]--&gt;
  &lt;!--[if gt IE 9]&gt;&lt;!--&gt;&lt;html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;!--&lt;![endif]--&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
      &lt;link rel="dns-prefetch" href="https://ajax.googleapis.com"&gt;
      &lt;meta name="keywords" content="" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;!-- &lt;link rel="stylesheet" href="css/site.css" /&gt; --&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Exo:400,100,200,300,500,600,700,800,900|Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;style type="text/css"&gt;
          body.ticketDetail {
              margin: 0;
              padding: 0;
              color: #292929;
              font: 400 14px "Exo",sans-serif;
          }
          .fixed-container {
              position: fixed;
              top: 0;
          }
          .main-container {
              padding: 85px 30px 100px;
              background: none;
          }
          .toggle-wrap {
              position: fixed;
              z-index: 9;
              box-shadow: 3px 0px 5px #000;
              height: 59px;
          }
          .toggle-wrap {
              width: 100%;
              background: #f3f3f3;
              background: rgba(243,243,243,0.8);
              filter: alpha(opacity=80);
              filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
          }
          .container-right&gt;div {
              height: 175px;
              border-left: 13px solid #bbc3c6;
              background: #f4f4f4;
              margin: 0 0 8px;
              -webkit-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
              -moz-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
              -ms-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
              -o-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
              transition: transform .35s ease-in-out, background 0.8s ease-in-out;
          }
          .e-stand-b {
              border-left: 13px solid #f39c11 !important;
          }
          .e-stand-a {
              border-left: 13px solid #f1c40f !important;
          }
          .n-stand-a {
              border-left: 13px solid #3497db !important;
          }
          .n-stand-b {
              border-left: 13px solid #297fb8 !important;
          }
          .s-stand-a {
              border-left: 13px solid #dae0e0 !important;
          }
          .w-stand-a {
              border-left: 13px solid #e74b3c !important;
          }
          .w-stand-b {
              border-left: 13px solid #c1392b !important;
          }
          .container-right&gt;div:before {
              content: '';
              display: table;
          }
          .container-right&gt;div:after {
              content: '';
              display: table;
              clear: both;
          }
          .container-right&gt;div:hover {
              -webkit-transform: scale(1.03);
              -moz-transform: scale(1.03);
              -ms-transform: scale(1.03);
              -o-transform: scale(1.03);
              transform: scale(1.03);
              background: #000;
              background: rgba(0,0,0,0.5);
              filter: alpha(opacity=50);
              filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
          }
          .main-container .container-fluid {
              padding: 0;
              position: relative;
          }
          .container-right-column {
              float: right;
              width: 100%;
          }
          .container-right {
              margin-left: 650px;
              position: relative;
          }
          .container-left {
              position: relative;
              float: left;
              background: #f4f4f4;
              text-align: center;
              width: 630px;
              margin-right: -100%;
              height: 635px;
          }
          .container-left h2 {
              color: #9C9A9A;
              font-size: 18px;
              text-transform: uppercase;
              letter-spacing: 0.4px;
              margin: 35px 0 34px;
          }
          .container-left img {
              display: block;
              max-width: 100%;
              margin: 0 auto;
          }
          .container-left a {
              position: absolute;
              opacity: 0;
              transition: opacity .5s ease-in;
              outline: none;
          }
          a.e-stand-b {
              top: 14%;
              left: 12%;
              z-index: 2;
              width: 76%;
              height: 8%;
          }
          a.e-stand-a {
              top: 22%;
              left: 20%;
              z-index: 2;
              width: 60%;
              height: 8%;
          }
          a.n-stand-b {
              top: 21%;
              left: 4%;
              z-index: 2;
              width: 9%;
              height: 60%;
          }
          a.n-stand-a {
              top: 28%;
              left: 13%;
              z-index: 2;
              width: 8%;
              height: 47%;
          }
          a.s-stand-b {
              top: 21%;
              right: 4%;
              z-index: 2;
              width: 9%;
              height: 60%;
          }
          a.s-stand-a {
              top: 28%;
              right: 13%;
              z-index: 2;
              width: 8%;
              height: 47%;
          }
          a.w-stand-b {
              bottom: 10%;
              left: 12%;
              z-index: 2;
              width: 76%;
              height: 8%;
          }
          a.w-stand-a {
              bottom: 18%;
              left: 18%;
              z-index: 2;
              width: 63%;
              height: 8%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body class="ticketDetail"&gt;
      &lt;div class="toggle-wrap"&gt;
      &lt;/div&gt;
      &lt;div class="main-container"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="container-right-column"&gt;
                  &lt;div class="container-right"&gt;
                      &lt;div class="e-stand-a"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="s-stand-a"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="w-stand-a"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="n-stand-a"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="e-stand-b"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="s-stand-b"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="w-stand-b"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="n-stand-b"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="fixed-container"&gt;
                  &lt;div class="container-left"&gt;
                      &lt;h2&gt;Stadium Name&lt;/h2&gt;
                      &lt;img src="images/goan-stadium-img.png" alt="stadium" usemap="#Stadium" id="#Stadium" /&gt;
                      &lt;a href="javascript:void(0)" class="e-stand-b"&gt;&lt;/a&gt;
                      &lt;a href="javascript:void(0)" class="e-stand-a"&gt;&lt;/a&gt;
                      &lt;a href="javascript:void(0)" class="n-stand-b"&gt;&lt;/a&gt;
                      &lt;a href="javascript:void(0)" class="n-stand-a"&gt;&lt;/a&gt;
                      &lt;a href="javascript:void(0)" class="s-stand-b"&gt;&lt;/a&gt;
                      &lt;a href="javascript:void(0)" class="s-stand-a"&gt;&lt;/a&gt;
                      &lt;a href="javascript:void(0)" class="w-stand-b"&gt;&lt;/a&gt;
                      &lt;a href="javascript:void(0)" class="w-stand-a"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          function checkWidth() {
              var windowSize = $(window).width();
              if (windowSize &lt;= 765) {
                  $('#fixed-container').css('position', 'initial');
              }
              if (windowSize &gt; 765) {
                  // ----------***********Ticket Detail Prepend method***********---------------
                  $('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
                      $('[class*="b-"]').removeClass(function(index, className) {
                          return (className.match(/(^|\s)b-\S+/g) || []).join(' ');
                      });
                      var stand_class= $(this).attr('class');
                      $('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
                      $('div.'+stand_class).addClass('b-'+stand_class);
                  });
  
                  // ----------***********Ticket Detail Hover method***********---------------
                  $("div.e-stand-a, div.e-stand-b, div.s-stand-a, div.s-stand-b, div.w-stand-a, div.w-stand-b, div.n-stand-a, div.n-stand-b").mouseenter(function() {
                      var stand_class= $(this).attr('class');
                      stand_class = stand_class.split(' ');
                      $(this).addClass('b-'+stand_class[0]);
                  }).mouseleave(function() {
                      var stand_class= $(this).attr('class');
                      stand_class = stand_class.split(' ');
                      $(this).removeClass('b-'+stand_class[0]);
                  });
                  /*$('#floatingElement').followMe({ container: '.container-column-main' });*/
              }
              if (windowSize &lt;= 765) {
                  $('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').attr('href', '#to-top');
                  // ----------***********Ticket Detail Prepend method***********---------------
                  $('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
                      $('[class*="bm-"]').removeClass(function(index, className) {
                          return (className.match(/(^|\s)bm-\S+/g) || []).join(' ');
                      });
                      var stand_class= $(this).attr('class');
                      $('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
                      $('div.'+stand_class).addClass('bm-'+stand_class);
                  });
              }
          }
          // Execute on load
          checkWidth();
          // Bind event listener
          $(window).resize(checkWidth);
  
          var sliderTop = $('.container-right').height(); // header size
          console.log(sliderTop);
  
          $(window).scroll(function () {
              //var notAnimated = true;
              var scrollTop = $(window).scrollTop();
              //console.log(sliderTop + " " + scrollTop);
              if (scrollTop &gt; 300) {
                  $('#fixed-container').addClass('fixed-container');
                  $('.contact-info-wrap').css('padding-top', '300px');
              }
              if (scrollTop &gt; sliderTop) {
                  $('#fixed-container').removeClass('fixed-container');
                  $('.contact-info-wrap').css('padding-top', '50px');
              }
              if (scrollTop &lt; 300) {
                  $('#fixed-container').removeClass('fixed-container');
                  $('.contact-info-wrap').css('padding-top', '50px');
              }
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Right now when I click on the left side stadium anyone of block so accordingly in the right side column it is sliding down at the top of the right container.</p>
  
  <p>And after scrolling down the page I make the left container position fixed and right container scroll-able. And clicking on any stadium block the right container blocks showing on top of container only.</p>
  
  <p>But what I really want that when I scroll down and then click on the left container stadium block, the right container blocks should be shown in visible window not at the top of the right container.</p>
  
  <p>Please someone help me out it's really needy... And please let me know.</p>
  
  <p>Thanks</p>