我有页面工作和元素与徽标和按钮“申请”。我添加到这个元素“position:fixed”,当我滚动页面时,我有这个元素STICKY,当我滚动到页脚时,徽标和按钮与页脚重叠。我能以某种方式更改它以使这个元素(徽标和按钮)在页脚或下面的其他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>
像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上我可以帮助你更好。