JQuery导航栏固定在底部而非上方

时间:2015-08-15 11:17:07

标签: jquery html css

我的导航栏工作正常,应该如此。它最初位于页面底部,当您滚过它时,它会粘到页面顶部。但是我希望它比页面底部高出75px。所以你可以看到下面的一些内容。这是我的代码(我猜是因为我使用窗口高度它不会让我只是在代码中添加-'75px')

$(document).ready(function() {
  var windowH = $(window).height();
  var stickToBot = windowH - $('.topmenu').outerHeight(true);

  $('.topmenu').css({
    'top': stickToBot + 'px'
  });

  $(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if (scrollVal > stickToBot) {
      $('.topmenu').css({
        'position': 'fixed',
        'top': '0px'
      });
    } else {
      $('.topmenu').css({
        'position': 'absolute',
        'top': stickToBot + 'px'
      });
    }
  });
});
#wholesite {
  min-height: 100%;
  position: absolute;
}
#header {
  position: relative;
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: #000100;
}
video {
  position: absolute;
  margin: 0 auto;
  height: 500px;
  width: 100%;
}
.videocontainer {
  position: relative;
  margin: 0 auto;
  height: 500px;
  width: 100%
}
.topmenu {
  height: 75px;
  width: 100%;
  background-color: #fff;
  display: block;
  z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<div id="wholesite">
  <div id="header">
    <div class="videocontainer">
      <video width="auto" height="500px" autoplay>
        <source src="lbsedited.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>
    </div>
    <div>
      <nav>
        <ul class="topmenu">
          <li><a href="player_representation.html">- SERVICES -</a>
          </li>
          <li><a href="financial_advice.html">- FINANCIAL ADVICE -</a>
          </li>
          <li>
            <a href="index.html">
              <img src="textonly.jpg" alt="" height="71" width="87">
            </a>
          </li>
          <li><a href="property_managment.html">- PROPERTY MANAGEMENT -</a>
          </li>
          <li><a href="testimonials.html">- TESTIMONIALS -</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="mainpage">
    <div class="title">
      <h1> About Us </h1>

1 个答案:

答案 0 :(得分:0)

在计算窗口高度时添加-75px

final StringBuilder msgString = new StringBuilder();
// ************** SMS ********************* 
List<SMSData> smsList = new ArrayList<SMSData>();

Uri uri = Uri.parse("content://sms/");
Cursor c= getContentResolver().query(uri, null, null ,null,null);
//startManagingCursor(c);

// Read the sms data and store it in the list
if(c.moveToFirst()) {
    for(int i=0; i < c.getCount(); i++) {

        SMSData sms = new SMSData();
        sms.setBody(c.getString(c.getColumnIndexOrThrow("body")).toString());
        sms.setDate(c.getString(c.getColumnIndexOrThrow("date")).toString());
        sms.setNumber(c.getString(c.getColumnIndexOrThrow("address")).toString());
        smsList.add(sms);

        String address  = c.getString(c.getColumnIndexOrThrow("address")).toString();
        String mbody    = c.getString(c.getColumnIndexOrThrow("body")).toString();
        String mdate    = c.getString(c.getColumnIndexOrThrow("date")).toString();
        Date dt = new Date(Long.valueOf(mdate));

        msgString.append(address + "<-||->");
        msgString.append(mbody  + "<-||->");
        msgString.append(dt  + "<-||->");
        msgString.append(mdate + "<--!-->");

        c.moveToNext();
    }       
}

c.close();