javascript - 在移动设备上查看固定标题

Question

您好，我的网站有一个固定的水平导航栏，当我放大时，我在移动设备上滚动它时遇到问题。我做了研究，解决这个问题的唯一方法是使用 javascript。

我找到了一个 jquery 解决方案(如下)，但我很难将其转换为 Angular Directive(指令)。有什么帮助吗？谢谢

我正在尝试将其转换为 Angular Directive(指令)的 jquery

if ($(window).width() < 990) {
$('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
$('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
 }
 $(window).scroll(function() {
if ($(window).width() < 990) {
$('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
$('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
}
else {
$('#copyright').css({ 'left': '20px' });
$('#click-to-call, #erving').css({ 'right': '20px' });
}
  });

Answer 1

像这样:

angular.module('myapp')
.directive('fixedBar', function ($window) {
  return {
    restrict: 'A',
    link: function (scope, element) {
      $win = angular.element($window);
      // Assuming these elements are static
      $lefties = element.find('#copyright');
      $righties = element.find('#click-to-call, #erving');

      function updateBar() {
        if ($win.width() < 990) {
          $lefties.css({ 'left': (20 - $win.scrollLeft()) + 'px' });
          $righties.css({ 'right': (20 + $win.scrollLeft()) + 'px'});
        } else {
          $lefties.css({ 'left': '20px' });
          $righties.css({ 'right': '20px' });
        }
      }

      $win.on('scroll', updateBar);

      updateBar();
    }
  }
}

将允许您这样做:

<nav fixed-bar>
  <div id="copyright"></div>
  <div id="click-to-call"></div>
  <div id="erving"></div>
</nav>