如何在css和html中的正确位置停止位置：固定元素？

Question

我有页面 Job 和带有徽标和按钮apply 的元素。 我添加到这个元素position: fixed并且当我滚动页面时我有这个元素 STICKY 并且当我滚动到页脚时，徽标和按钮与页脚重叠。 我可以以某种方式更改它以使此元素（徽标和按钮）关闭position: fixed在页脚或下面的其他 div 上吗？ 我想使用position:fixed仅在内容旁边 - card-text （在我的元素左侧）。

element {
     margin: 0 auto;
     margin-top: 0px;
     display: block;
     margin-top: 15px;
}
 img#companylogo {
     position: fixed;
}
 img#companylogo {
     position: fixed;
}
 img {
     vertical-align: middle;
     border-style: none;
}

<div class="row" >
<div class="col-xl-8">
   <div class="card shadow p-3 mb-5 bg-white rounded" style="max-width: 50rem;margin-left: auto; margin-right: auto;">
      <div class="card-body">
         <b>agreement</b>
         <p class="card-text"><%= @job.job_type %></p>
         <b>description</b>
         <p class="card-text"><%=raw @job.description %></p>
         <b>skills</b>
         <p class="card-text"> <%=raw @job.requirements %></p>
         <b>expiration date offer</b>
         <p> <%= @job.data %> <%= @job.hour %></p>
         :
      </div>
   </div>
</div>
<div class="col-xl-4">
   <%  unless @job.avatar_url.nil? %><%= image_tag  @job.avatar_url(:display), style: "margin: 0 auto; display: block;  margin-top: 15px", id: "companylogo" %><% end %>
   <%= link_to @job.url do %>
   <% end %>
   <%=  link_to 'Apply', @job.url, class: "btn btn-lg btn-block pb_btn-pill  btn-shadow-blue .margin_desktop", style: "max-width: 200px ; background:  linear-gradient(to right, #1488cc, #2b32b2); color: white !important;  border: 0px;margin: 0 auto; display: block; margin-top: 15px;  margin-bottom: 15px"%>
</div>
</body>

Answer 1

您可以使用 position:sticky .. 浏览器支持很棒。 检查此链接link示例：此链接

Answer 2

像thislink你可以用这个jquery代码来做

var windw = this;

$.fn.followTo = function ( pos ) {
var $this = this,
    $window = $(windw);

$window.scroll(function(e){
    if ($window.scrollTop() > pos) {
        $this.css({
            position: 'absolute',
            top: pos
        });
    } else {
        $this.css({
            position: 'fixed',
            top: 0
        });
    }
  });
};

$('#your div ID contain logo and btn').followTo(200/*WHERE YOU WANT TO STOP SCROLING*/);

我希望它解决了你的问题，但如果你能把你的代码放在 jsfiddle 上，我可以更好地帮助你。