Question

你听到了这个头衔。我正在www.thundergamingforums.com的网页上工作，我似乎无法找到如何做到这一点。请用CSS / HTML解释，但是如果你需要请用任何语言完全重写代码。

Member.aggregate(
  {
    $lookup : {
      from : "orders",
      localField : "_id",
      foreignField : "memberId",
      as : "tmpOrders"
    }
  },
  {
    $lookup : {
      from : "members",
      localField : "captain",
      foreignField : "_id",
      as : "tmpCaptains"
    }
  },
  {
    $group: {
      _id: {
        captain: "$captain",
        captainFirstName: "$tmpCaptains.firstName",
        captainLastName: "$tmpCaptains.lastName"
      },
      members: {
        $push: "$$ROOT"
      }
    }
  },
  {
    $project: {
      "_id.captainFirstName": 1,
      "_id.captainLastName": 1,
      "members.firstName": 1,
      "members.lastName": 1,
      "members.tmpOrders.orderDate": 1,
      "members.tmpOrders.orderTotal": 1,
      "members.tmpOrders.orderProducts.title": 1,
      "members.tmpOrders.orderProducts.totalItemPrice": 1
    },
  },
  {
    $sort: {
      "_id.captainLastName": 1,
      "_id.captainFirstName": 1
    }
  }
)

Answer 1

使用html / css，您可以使用position: sticky，但值得注意的是浏览器支持有限http://caniuse.com/css-sticky/embed/

body {
  padding-top: 100px;
  height: 300vh;
}

#navbarc {
  position: sticky;
  top: 0;
}

<!DOCTYPE html>
<html>

<head>
  <style>
    #navbarc {
    }
    
    #navbarc ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #222;
    }
    
    #navbarc li {
      float: left;
    }
    
    #navbarc li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    #navbarc li a:hover:not(.active) {
      background-color: #111;
      transition: color .1s;
      color: #00a6ff;
    }
    
    #navbarc .active {
      background-color: #00a6ff;
    }
  </style>
</head>

<body>
  <div id="navbarc">
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#about">Forums</a></li>
      <li><a href="https://www.youtube.com/channel/UCUKBcVKyI6rpgBFu9Zp5_ZA">Youtube</a></li>
      <li><a href="http://steamcommunity.com/groups/officialthundergaming">Steam Group</a></li>

    </ul>
  </div>
</body>

</html>

Answer 2

如果我是正确的，你想要在触摸屏幕顶部时将导航栏固定在屏幕顶部。

您可能需要jQuery才能在scrollTop方法的帮助下完成此操作。

class Animal {
    void saySomething() {System.out.print(" Hummmmm!");}
}

class Cow extends Animal {
    protected void saySomething() {System.out.print(" oMooo!");}
}
public class test {
    public static void main(String [] args) {
        System.out.print(" MooYa!");
        Animal [] animals = {new Animal(), new Cow()};
        for( Animal a : animals) {
            a.saySomething();
        }
    }
}

如何创建一个滚动到的导航栏，在CSS中粘贴到屏幕顶部？

2 个答案: