I have some code that has a header and a footer which is a sort of navigation but is always present. I have a div in the middle which is scrollable. I have it so I can detect when it is scrolled to the top but not at the bottom. I want it to look a little like Facebook profile page and it will have more info in the scrollable div eventually. Ultimately I want the header, which is the images and name to disappear out of sight and just leave the name and little circle image when scrolled up, I can do this easily if I can get the scrolling detection working. I want it to have a mobile feel to it.

I think its because of how I have set it up and I have tried all sorts to change it without changing its appearance. I am using bootstrap.

I have it working like so but does not work with the snippet added? Its the `<div id="profile-middle" class="profile-middle">` I need to detect.

```js
$(function() {
  var $win = $('#profile-middle');

  $win.scroll(function() {
    if ($win.scrollTop() == 0)
      alert('Scrolled to Page Top');
    else if ($win.height() + $win.scrollTop() ==
      $(document).height()) {
      console.log('Scrolled to Page Bottom');
    }
  });
});
```

```css
.profile-head {
  transform: translateY(5rem)
}

.cover {
  background-image: url(https://images.unsplash.com/photo-1493571716545-b559a19edd14?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
  background-size: cover;
  background-repeat: no-repeat
}

body {
  background: #654ea3;
  background: linear-gradient(to right, #e96443, #904e95);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
}

#main {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.img-rounded {
  padding: .1rem;
  border-radius: 100px!important;
}

.custom1 {
  position: relative;
  top: 3px;
  margin-right: 5px;
  line-height: 10px;
}

.profile {
  position: relative;
  top: 0;
  display: none;
  z-index: 1;
  transition: 0.3s;
}

.profile-middle {
  position: absolute;
  top: 350px;
  width: 100%;
  bottom: 20px;
  z-index: 2;
  display: none;
  overflow-y: scroll;
}

.green_icon {
  background-color: #4cd137;
  position: relative;
  left: 97px;
  top: 125px;
  height: 20px;
  width: 20px;
  border: 4px solid white;
  border-radius: 50%;
}

.scrolled {
  background-color: #4cd137;
  top: -150px;
  transition: 0.3s;
}

.pimg img {
  width: 200px;
  height: 200px;
}

.profile-main {
  position: absolute;
  top: 310px;
  right: 0px;
  font-size: .775rem;
}

.nav-tabs {
  border: 0px solid #dee2e6;
}

.nav {
  border: 0px solid #dee2e6;
}

.nav-link.active {
  color: #495057;
  background-color: #fff;
  border: 0px solid #dee2e6;
}

.profile-header .profile-header-tab {
  background: #fff;
  list-style-type: none;
  margin: -10px 0 0;
  padding: 0 0 0 140px;
  white-space: nowrap;
  border-radius: 0;
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>

<div id="main">
  <div id="profile" class="profile">
    <div class="row px-0">
      <div class="col-sm-12 mx-auto">
        <!-- Profile widget -->
        <div class="bg-white shadow rounded overflow-hidden">
          <div class="px-4 pt-0 pb-4 cover">
            <div class="media align-items-end profile-head">
              <div class="profile mr-3">
                <div class="green_icon"></div><img src="https://exciting-aryabhata.77-68-74-200.plesk.page/img/thumbs/10230.jpg" alt="..." width="130" class="img-rounded mb-2 img-thumbnail"><button type="button" class="btn btn-outline-dark btn-sm btn-block"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart custom1" viewBox="0 0 16 16">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>Add to favourites</button></div>
              <div class="media-body mb-5 text-white">
                <h4 class="mt-0 mb-0">Shannon White, 35</h4>
                <p class="small mb-4"> <i class="fas fa-map-marker-alt mr-2"></i>Birmingham</p>
              </div>
            </div>
          </div>

          <div class="bg-light p-4 d-flex justify-content-end text-center">
            <ul class="list-inline mb-0">
              <li class="list-inline-item">
                <h5 class="font-weight-bold mb-0 d-block">4</h5><small class="text-muted"> <i class="fas fa-image mr-1"></i>Photos</small>
              </li>

              <li class="list-inline-item">
                <h5 class="font-weight-bold mb-0 d-block">11</h5><small class="text-muted"> <i class="fas fa-user mr-1"></i>Reviews</small>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ul class="profile-header-tab nav nav-tabs profile-main">
  <li class="nav-item1"><a href="#profile-post" class="nav-link active show" data-toggle="tab">POSTS</a></li>
  <li class="nav-item1"><a href="#profile-about" class="nav-link" data-toggle="tab">ABOUT</a></li>
  <li class="nav-item1"><a href="#profile-photos" class="nav-link" data-toggle="tab">PHOTOS</a></li>
  <li class="nav-item1"><a href="#profile-videos" class="nav-link" data-toggle="tab">VIDEOS</a></li>
  <li class="nav-item1"><a href="#profile-friends" class="nav-link" data-toggle="tab">FRIENDS</a></li>
</ul>
<!-- END profile-header-tab -->

<div id="profile-middle" class="profile-middle">
  <div class="py-4 px-4">
    <div class="d-flex align-items-center justify-content-between mb-3">
      <h5 class="mb-0">Recent photos</h5><a href="#" class="btn btn-link text-muted">Show all</a>
    </div>

    <div class="row">
      <div class="col-sm-6 mb-2 pr-lg-1"><img src="https://bootstrapious.com/i/snippets/sn-profile/img-3.jpg" alt="" class="img-fluid rounded shadow-sm"></div>
      <div class="col-sm-6 mb-2 pl-lg-1"><img src="https://bootstrapious.com/i/snippets/sn-profile/img-4.jpg" alt="" class="img-fluid rounded shadow-sm"></div>
      <div class="col-sm-6 pr-lg-1 mb-2"><img src="https://bootstrapious.com/i/snippets/sn-profile/img-5.jpg" alt="" class="img-fluid rounded shadow-sm"></div>
      <div class="col-sm-6 pl-lg-1"><img src="https://bootstrapious.com/i/snippets/sn-profile/img-6.jpg" alt="" class="img-fluid rounded shadow-sm"></div>
    </div>

    <div class="py-4">
      <h5 class="mb-3">Recent posts</h5>
      <div class="p-4 bg-light rounded shadow-sm">
        <p class="font-italic mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <ul class="list-inline small text-muted mt-3 mb-0">
          <li class="list-inline-item"><i class="fa fa-comment-o mr-2"></i>12 Comments</li>
          <li class="list-inline-item"><i class="fa fa-heart-o mr-2"></i>200 Likes</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- End profile widget -->
</div>

<div class="searchbar" id="searchbar">
  <form action="searchpage.php" id="searchform" method="get" name="searchform">
    <button class="fa fa-search fa-2x" id="searchsubmit" type="submit"></button> <input autocomplete="off" id="autoc" name="s" placeholder="Keywords (seperate with commas)" type="search">
  </form>
</div>

<div class="control" id="control-nav">
  <div class="nav-item" id="search">
    <i class="fas fa-search search"></i>
  </div>
  <div class="nav-item" id="notifications">
    <i class="fas fa-bell"></i>
  </div>
  <div class="nav-item" id="messages">
    <i class="fas fa-comment"></i>
  </div>
  <div class="nav-item" id="locationnav">
    <i class="fas fa-location-arrow"></i>
  </div>
  <div class="nav-item" id="user">
    <i class="fas fa-user"></i>
  </div>
</div>
```